ng-dynamic-components

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.