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:

| Input | Description | Default Value | | ------------------ | ------------------------------------------------------------------------ | ------------- | | idRef | Sets the id for the component | undefined | | label | Sets the label on the component | undefined | | validationMessages | Messages related to validation errors | {} | | readonly | Sets the form element to readonly view | false | | placeholder | Placeholder text | '' | | maxlength | Sets the maximum character length of the UI Input | undefined | | upperCase | Converts all alphabetical character inputs from lowercase to capitalised | false |

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:

| Input | Description | Default Value | | ------------------ | ------------------------------------------------------------------------ | ------------- | | idRef | Sets the id for the component | undefined | | label | Sets the label on the component | undefined | | validationMessages | Messages related to validation errors | {} | | readonly | Sets the form element to readonly view | false | | placeholder | Placeholder text | '' | | maxlength | Sets the maximum character length of the UI Input | undefined | | upperCase | Converts all alphabetical character inputs from lowercase to capitalised | false |

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:

| Input | Description | Default Value | | ------------------ | -------------------------------------- | ------------- | | idRef | Sets the id for the component | undefined | | label | Sets the label on the component | undefined | | validationMessages | Messages related to validation errors | {} | | readonly | Sets the form element to readonly view | false | | options | Sets the available select 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:

| Input | Description | Default Value | | ------------------ | -------------------------------------- | ------------- | | idRef | Sets the id for the component | undefined | | label | Sets the label on the component | undefined | | validationMessages | Messages related to validation errors | {} | | readonly | Sets the form element to readonly view | false | | options | Sets the available select 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:

| Input | Description | Default Value | | ----- | ------------------------------- | ------------- | | idRef | Sets the id for the component | undefined | | label | Sets the label on the component | undefined |

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:

| Input | Description | Default Value | | ------- | --------------------------------------- | ------------- | | idRef | Sets the id for the component | undefined | | label | Sets the label on the component | undefined | | options | Sets the available select options | [] | | layout | Sets the alignment of the radio buttons | horizontal |

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:

| Input | Description | Default Value | | ------------------ | -------------------------------------- | ------------- | | idRef | Sets the id for the component | undefined | | label | Sets the label on the component | undefined | | validationMessages | Messages related to validation errors | {} | | readonly | Sets the form element to readonly view | false |

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.