NgFlatForm

Angular 8+ static and dynamic forms library. Supports validation, async calls, and floating labels. Support for the following input types:

• text
• number
• password
• email
• textarea
• date
• select

Getting started

1. Install ng-flat-form

Download from npm here. Or install locally by running:

  npm install ng-flat-form --save

2. Import the installed libraries

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { NgFlatFormModule } from 'ng-flat-form/lib/ng-flat-form.module';

import { AppComponent } from './app';

@NgModule({
  ...
  imports: [
    ...,
    NgFlatFormModule
  ],
})
export class AppModule {}

3. Create a flat-form in in your template

View Template

<div class="container">
  <ng-flat-form [form]="form"></ng-flat-form>
</div>

Component

  public form: FlatForm;

  constructor() { }

  ngOnInit(): void {
    this.initializeForm();
  }

  private initializeForm(): void {
    this.form = new FlatForm([
      new FlatFormControlGroup({
        title: '',
        description: '',
        controls: [
          new FlatFormControl({
            class: 'border-bottom half border-right',
            key: 'name',
            placeholder: 'Name',
            type: FlatFormControlType.INPUT_TEXT,
            required: true,
            showValidation: true,
            showLength: true,
          }),
          new FlatFormControl({
            class: 'border-bottom half',
            key: 'email',
            placeholder: 'Email',
            type: FlatFormControlType.INPUT_EMAIL,
            required: true,
            showValidation: true,
            manualValidation: true,
            showLength: true,
            onChange: this.handlePasswordChange,
            debounceTime: 1000,
          })
        ]);
      })
    ];
  }

4. Subscribe to form changes

Component

  public form: FlatForm;

  constructor() { }

  ngOnInit(): void {
    this.initializeForm();
    this.handleFormChange();
  }

  private handleFormChange(): void {
    this.form.statusChanges.subscribe((event: any) => {
      console.log(this.form.value);
    });
  }

5. Set form value

You can set the forms value in two ways: During initialization, by providing a value to the value property within FlatFormControl. Or by calling setForm({..}) on the FlatForm instance.

Component

  public form: FlatForm;

  constructor() { }

  ngOnInit(): void {
    this.initializeForm();
    this.handleFormChange();
    this.setForm();
  }

  private setForm(): void {
    this.form.setValue({
      name: 'Ron Swanson',
      email: '[email protected]'
    });
  }

Properties

FlatFormControl

| Property | Type | Required | Description | | ------------- |-------------| -----| ----| value | T | false | get/set the value of the control | key | string | true | the object key associated with the form value, also the corresponding key for json driven forms | placeholder | string | false | corresponds to the placeholder property of the element required | boolean | false | flag for whether the required field validator is applied to the given control disabled | boolean | false | flag for whether the given control will render as disabled type | FlatFormControlType | true | sets the control type (input, textarea, select) maxLength | number | false | corresponds to the maxLength property of the element minLength | number | false | corresponds to the minLength property of the element max | number | false | corresponds to the max property of the element min | number | false | corresponds to the min property of the element loading | boolean | false | flag controlling the visibility of the loading icon | hidden | boolean | false | corresponds to the hidden property of the element | showLoadingOnChange | boolean | false | flag for whether the loading icon should be shown when onChange is called | selectOptions | {key: string, value: string}[] = [] | false | array of key/value pairs to be used for select options | rows | number | false | corresponds to the rows attribute of the element | showValidation | boolean | false | flag for whether or not valid/invalid icons are shown while editing the given control | manualValidation | boolean | false | disables automatic validation allowing for manual updating of the given controls state | showLength | boolean | false | flat for whether or not dynamic character count is shown when maxLength is also defined | onChange | (event: any, control: FlatFormControl, controls: FlatFormControl[]) => void | | selectOptionsAsync | () => any | false | callback for retrieving select options dynamically | selectOptionsMap | { keyProperty: string, valueProperty: string } | false | function for mapping selectOptionsAsync to key/value pairs as defined for selectOptions | class | string | false | free form string for assigning custom classes to the given control | state | string | false | represents the status of the given control at any time (valid, invalid) | debounceTime | number | false | milliseconds delay between an input change event and the callback to onChange |