ng-flat-form v1.2.2

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: 'ron.swanson@pnr.giv'
    });
  }

Properties

FlatFormControl