Status:

Links:

Ngx Formly is a dynamic JSON powered form library for Angular (mainly based an on Angular Reactive Forms) that bring unmatched maintainability to your application's forms.

Supported UI libs

Which Version to use?

• Documentation, demos, and guides
• StackBlitz Template
  • UI Bootstrap
  • UI Material
  • UI Ionic
  • UI PrimeNG
  • UI Kendo

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

  npm install @angular/forms @ngx-formly/core --save

• Material2:
  1. Ensure you have already installed material2 https://material.angular.io/guide/getting-started
  2. Install @ngx-formly/material

  npm install @ngx-formly/material --save

• Bootstrap:

    npm install @ngx-formly/bootstrap --save

• Ionic:

    npm install @ngx-formly/ionic --save

• PrimeNG:

    npm install @ngx-formly/primeng --save

• Kendo:

    npm install @ngx-formly/kendo --save

• NativeScript

    npm install @ngx-formly/nativescript --save

import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {FormlyModule} from '@ngx-formly/core';
import {FormlyBootstrapModule} from '@ngx-formly/bootstrap';

// for material2 import `FormlyMaterialModule`:
// import {FormlyMaterialModule} from '@ngx-formly/material';

// for ionic import `FormlyIonicModule`:
// import {FormlyIonicModule} from '@ngx-formly/ionic';

// for primeng import `FormlyPrimeNGModule`:
// import {FormlyPrimeNGModule} from '@ngx-formly/primeng';

// for kendo import `FormlyKendoModule`:
// import {FormlyKendoModule} from '@ngx-formly/kendo';

@NgModule({
  imports: [
    ...,
    ReactiveFormsModule,
    FormlyModule.forRoot(),
    FormlyBootstrapModule,

    // for material2:
    // FormlyMaterialModule

    // for ionic:
    // FormlyIonicModule

    // for primeng:
    // FormlyPrimeNGModule

    // for kendo:
    // FormlyKendoModule
  ],
})
export class AppModule {}

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

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

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

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

@ngx-formly/schematics provides CLI commands for setting up a project and eventually generating other features (e.g. wrapper components). Built on top of Schematics, this tool integrates with the Angular CLI.

Install @ngx-formly/schematics from npm:

npm install @ngx-formly/schematics --save-dev

To use @ngx-formly/schematics as the default collection in your Angular CLI project, add it to your angular.json:

ng config cli.defaultCollection @ngx-formly/schematics

The collection schema defines the available schematics to run.

The @ngx-formly/schematics extend the default @schematics/angular collection and so all existing Angular CLI commands are available. If you want to set defaults for schematics such as generating components with scss file, you must change the schematics package name from @schematics/angular to @ngx-formly/schematics in angular.json:

"schematics": {
  "@ngx-formly/schematics:component": {
    "styleext": "scss"
  }
}

  ng add @ngx-formly/schematics --ui-theme=material

See the issues labeled enhancement

A special thanks to Kent C. Dodds for giving me opportunity to work on this. This library is maintained (with love) by me, Mohammed Zama Khan. Thanks to all contributors! If you're trying to find angular-formly, go here

Thanks goes to these wonderful people (emoji key):