ng-dynamic-components v0.0.6

Form Controls

Installation

Run npm install ng-dynamic-components --save

Import peer dependencies npm i @angular/flex-layout @angular/material-moment-adapter moment -S

There are seven form controls available:

• Text Input
• Textarea
• Select
• Filterable Select
• Checkbox
• Radio Group
• Date Picker

Text Input

Import Module:

import { TextInputModule } from "ng-dynamic-components";

Form Component HTML:

<dc-text-input
  label="This is a label"
  [formControl]="control"
  idRef="exampleIdentifier"
  [validationMessages]="validationMessages"
></dc-text-input>

Form Component TypeScript:

export class FormComponent implements OnInit {
  public form!: FormGroup;

  public validationMessages = {
    required: "This field is mandatory.",
    maxlength: "Exceeded max length.",
  };

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      inputText: ["", [Validators.required, Validators.maxLength(10)]],
    });
  }

  public get control(): FormControl {
    return this.form.get("inputText") as FormControl;
  }
}

Input Options:

Textarea

Import Module:

import { TextareaModule } from "ng-dynamic-components";

Form Component HTML:

<dc-input-textarea
  label="This is a label"
  [formControl]="control"
  idRef="exampleIdentifier"
  [validationMessages]="validationMessages"
></dc-input-textarea>

Form Component TypeScript:

export class FormComponent implements OnInit {
  public form!: FormGroup;

  public validationMessages = {
    required: "This field is mandatory.",
    maxlength: "Exceeded max length.",
  };

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      textArea: ["", [Validators.required, Validators.maxLength(10)]],
    });
  }

  public get control(): FormControl {
    return this.form.get("textArea") as FormControl;
  }
}

Input Options:

Select

Import Module:

import { SelectModule } from "ng-dynamic-components";

Form Component HTML:

<dc-select
  label="This is a label"
  [formControl]="control"
  idRef="exampleIdentifier"
  [options]="options"
  [validationMessages]="validationMessages"
></dc-select>

Form Component TypeScript:

export class FormComponent implements OnInit {
  public form!: FormGroup;

  public validationMessages = {
    required: "This field is mandatory.",
    maxlength: "Exceeded max length.",
  };

  public options = [
    {
      value: 1,
      display: "One",
    },
    {
      value: 2,
      display: "Two",
    },
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      select: ["", [Validators.required, Validators.maxLength(10)]],
    });
  }

  public get control(): FormControl {
    return this.form.get("select") as FormControl;
  }
}

Input Options:

Filterable Select

Import Module:

import { FilterableSelectModule } from "ng-dynamic-components";

Form Component HTML:

<dc-filterable-select
  label="This is a label"
  [formControl]="control"
  idRef="exampleIdentifier"
  [validationMessages]="validationMessages"
  [options]="options"
></dc-filterable-select>

Form Component TypeScript:

export class FormComponent implements OnInit {
  public form!: FormGroup;

  public validationMessages = {
    required: "This field is mandatory.",
  };

  public options = [
    {
      value: 1,
      display: "One",
    },
    {
      value: 2,
      display: "Two",
    },
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      filterableSelect: ["", [Validators.required]],
    });
  }

  public get control(): FormControl {
    return this.form.get("filterableSelect") as FormControl;
  }
}

Input Options:

Checkbox

Import Module:

import { CheckboxModule } from "ng-dynamic-components";

Form Component HTML:

<dc-checkbox
  label="This is a label"
  [formControl]="control"
  idRef="exampleIdentifier"
></dc-checkbox>

Form Component TypeScript:

export class FormComponent implements OnInit {
  public form!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      checkbox: [{ value: true }],
    });
  }

  public get control(): FormControl {
    return this.form.get("checkbox") as FormControl;
  }
}

Input Options:

Radio Group

Import Module:

import { RadioGroupModule } from "ng-dynamic-components";

Form Component HTML:

<dc-radio-group
  label="This is a label"
  [options]="options"
  [formControl]="control"
  layout="vertical"
  idRef="exampleIdentifier"
></dc-radio-group>

Form Component TypeScript:

export class FormComponent implements OnInit {
  public form!: FormGroup;

  public options = [
    {
      value: 1,
      display: "One",
    },
    {
      value: 2,
      display: "Two",
    },
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      radioGroup: [""],
    });
  }

  public get control(): FormControl {
    return this.form.get("radioGroup") as FormControl;
  }
}

Input Options:

Date Picker

Import Module:

import { DatePickerModule } from "ng-dynamic-components";

Form Component HTML:

<dc-date-picker
  label="This is a label"
  [formControl]="control"
  idRef="exampleIdentifier"
  [validationMessages]="validationMessages"
></dc-date-picker>

Form Component TypeScript:

export class FormComponent implements OnInit {
  public form!: FormGroup;

  public validationMessages = {
    required: "This field is mandatory.",
  };

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      datepicker: ["", [Validators.required]],
    });
  }

  public get control(): FormControl {
    return this.form.get("datepicker") as FormControl;
  }
}

Input Options:

Setting the UI Style

Provide the token and the style you want as the value:

import { UI_STYLE } from "ng-dynamic-components";

@NgModule({
    ...
    providers: [
        ...
        { provide: UI_STYLE, useValue: 'material' }
    ]
})

Once the app is initialised the components can be programatically flipped using the FormService:

import { UI_STYLE } from "ng-dynamic-components";

export class AppComponent {
  constructor(private readonly formService: FormService) {
    this.formService.style = "simple";
  }
}

This package supports simple and material component designs.