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 (recomanded):

     ng add @ngx-formly/schematics@v5 --ui-theme=bootstrap

     • ui-theme: is optional flag which allows choosing the UI theme to install along with the core package, choose one of the following themes:
       • bootstrap
       • material
       • 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 accept a config argument where you can pass extra config, register a custom field type, wrapper 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',
      templateOptions: {
        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 lean more check out Formly @eggheadio course 🔥 by Juri Strumpflohner (Twitter - Blog).