Skip to content
JSON powered / Dynamic forms in Angular
Branch: v5
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.config chore(release): 5.0.0 Mar 23, 2019
.github style: add stackblitz starter example. (#885) Apr 12, 2018
demo docs(demo): add example of ag-grid integration (#1567) Apr 30, 2019
src feat(core): take account of enumerable getter on clone (#1637) Jun 26, 2019
.editorconfig chore(style): Added editorconfig, Added tslint as part of npm script May 7, 2016
.gitignore docs(demo): add example of ngx-datatable integration Aug 7, 2018
.npmignore These need to be added if we want to build locally issue #308 (#309) Dec 5, 2016
.travis.yml ci: fix travis failure (#1556) Apr 26, 2019 chore(release): 5.1.9 Jun 4, 2019 Create Nov 17, 2016 docs: update org name (#1349) Dec 19, 2018 docs: update README Feb 24, 2019
LICENSE Create LICENSE Apr 6, 2016 docs: update badge links Apr 22, 2019 chore(release): 2.0.0 Apr 15, 2018 docs: update org name (#1349) Dec 19, 2018
angular.json test(core): add tests for json-schema converter (#1336) Dec 8, 2018
commitlint.config.js feat: add nativescript support Aug 7, 2018
index.ts feat(bootstrap): split bootstrap from the core (#439) Jun 1, 2017
karma.conf.js build: remove ng-packagr patch May 30, 2018
package-lock.json chore(release): 5.1.9 Jun 4, 2019
package.json chore(release): 5.1.9 Jun 4, 2019
tsconfig-spec.json chore: enable noImplicitAny (#692) Feb 7, 2018
tsconfig.doc.json docs: use compodoc to generate docs (#562) Nov 12, 2017
tsconfig.json feat(core): add schematics Jun 6, 2018
tslint.json refactor(core): remove unnecessary args in checkField (#1151) Aug 27, 2018

JSON powered / Dynamic forms in Angular

Npm version Downloads Gitter Build Status


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

Bootstrap Demo StackBlitz
Material2 Demo StackBlitz
Ionic Demo StackBlitz
PrimeNG Demo StackBlitz
Kendo Demo StackBlitz

Which Version to use?

Angular version Formly version
Angular >= 7 @ngx-formly/core@5.x
Angular >= 6 @ngx-formly/core@4.x
Angular >= 5 @ngx-formly/core@3.x
Angular >= 4 @ngx-formly/core@2.x
Angular >= 2 ng-formly@1.x

Quick links

Quick Start

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

1. Install @angular/forms and @ngx-formly/core packages:

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

2. Choose and install your UI (pre-defined types/templates) package:

UI Npm package name NgModule
Bootstrap @ngx-formly/bootstrap FormlyBootstrapModule
Material2 @ngx-formly/material FormlyMaterialModule
Ionic @ngx-formly/ionic FormlyIonicModule
PrimeNG @ngx-formly/primeng FormlyPrimeNGModule
Kendo @ngx-formly/kendo FormlyKendoModule
NativeScript @ngx-formly/nativescript FormlyNativescriptModule
  npm install @ngx-formly/<package-name> --save

3. Import the FormlyModule and UI (pre-defined types/templates):

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

 * - Bootstrap:     import {FormlyBootstrapModule} from '@ngx-formly/bootstrap';
 * - Material2:     import {FormlyMaterialModule} from '@ngx-formly/material';
 * - Ionic:         import {FormlyIonicModule} from '@ngx-formly/ionic'
 * - PrimeNG:       import {FormlyPrimeNGModule} from '@ngx-formly/primeng';
 * - Kendo:         import {FormlyKendoModule} from '@ngx-formly/kendo';
 * - NativeScript:  import {FormlyNativescriptModule} from '@ngx-formly/nativescript';
import {FormlyBootstrapModule} from '@ngx-formly/bootstrap';

  imports: [

     * - Bootstrap:    FormlyBootstrapModule
     * - Material2:    FormlyMaterialModule
     * - Ionic:        FormlyIonicModule
     * - PrimeNG:      FormlyPrimeNGModule
     * - Kendo:        FormlyKendoModule
     * - NativeScript: FormlyNativescriptModule
export class AppModule {}

4. Define the form config in your component:

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

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

  submit(model) {

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

Using with Angular-CLI

@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

Default Schematics Collection

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"

Quick Start with Schematics

Install @angular/forms and @ngx-formly/core packages and choose a UI theme to install:

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


See the issues labeled enhancement



Thanks goes to these wonderful people (emoji key):







You can’t perform that action at this time.