Quick Start

Follow these steps to get started with Ngx Formly. Also check out our demos for further examples.

1. Install Formly packages:

• Installing with ng add (recommended):

  ng add @ngx-formly/schematics --ui-theme=bootstrap
  • ui-theme: is an optional flag which allows choosing the UI theme to install along with the core package; choose one of the following themes:
    • bootstrap
    • material
    • ng-zorro-antd
    • ionic
    • primeng
    • kendo
    • nativescript

• Installing with npm:

  npm install @angular/forms @ngx-formly/core @ngx-formly/bootstrap --save
  • replace bootstrap with one of the following available themes: material, ionic, primeng, kendo, nativescript.

  Once installed, FormlyModule will be imported in the AppModule:

import { AppComponent } from './app.component';
+ import { ReactiveFormsModule } from '@angular/forms';
+ import { FormlyModule } from '@ngx-formly/core';
+ import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';

@NgModule({
  imports: [
    BrowserModule
+   ReactiveFormsModule,
+   FormlyModule.forRoot(),
+   FormlyBootstrapModule
  ],
  ...
})
export class AppModule { }

The forRoot() call is required at the application's root level. The forRoot() method accepts a config argument where you can pass extra config, register custom field types, wrappers, extensions and validation.

2. add <formly-form> inside the form tag to your AppComponent template:

<form [formGroup]="form" (ngSubmit)="onSubmit(model)">
  <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

The <formly-form> component is the main container of the form, which will build and render form fields, it accept the following inputs:

• fields: The field configurations for building the form.

• form: The form instance which allow to track model value and validation status.

• model: The model to be represented by the form.

  For more details check Properties and Options.

3. Configure our defined form:

import {Component} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {FormlyFieldConfig} from '@ngx-formly/core';

@Component({
  selector: 'app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit(model)">
      <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  `,
})
export class AppComponent {
  form = new FormGroup({});
  model = { email: 'email@gmail.com' };
  fields: FormlyFieldConfig[] = [
    {
      key: 'email',
      type: 'input',
      props: {
        label: 'Email address',
        placeholder: 'Enter email',
        required: true,
      }
    }
  ];

  onSubmit(model) {
    console.log(model);
  }
}

That's it, the above example will render an email input that is marked required and filled with 'email@gmail.com' value.

From there, it's just JavaScript. Allowing for DRY, maintainable, reusable forms.

---

To learn more, check out the Formly @eggheadio course 🔥 by Juri Strumpflohner (Twitter - Blog).