Skip to content
JSON powered / Dynamic forms in Angular
Branch: v5
Clone or download
Permalink
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
CHANGELOG.md chore(release): 5.1.9 Jun 4, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Nov 17, 2016
CONTRIBUTING.md docs: update org name (#1349) Dec 19, 2018
CONTRIBUTORS.md docs: update README Feb 24, 2019
LICENSE Create LICENSE Apr 6, 2016
README.md docs: update badge links Apr 22, 2019
UPGRADE-2.0.md chore(release): 2.0.0 Apr 15, 2018
UPGRADE-5.0.md 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

README.md


JSON powered / Dynamic forms in Angular

Npm version Downloads Gitter Build Status


@ngx-formly

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

UI
Bootstrap Demo StackBlitz
Material2 Demo StackBlitz
Ionic Demo StackBlitz
PrimeNG Demo StackBlitz
Kendo Demo StackBlitz
NativeScript

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';

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

    /**
     * - Bootstrap:    FormlyBootstrapModule
     * - Material2:    FormlyMaterialModule
     * - Ionic:        FormlyIonicModule
     * - PrimeNG:      FormlyPrimeNGModule
     * - Kendo:        FormlyKendoModule
     * - NativeScript: FormlyNativescriptModule
     */
    FormlyBootstrapModule,
  ],
})
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';

@Component({
  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>
    </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,
    }
  }];

  submit(model) {
    console.log(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.

Installation

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

Roadmap

See the issues labeled enhancement

Credits

Contributors

Thanks goes to these wonderful people (emoji key):

aitboudadmohammedzamakhandivyakumarjaincouzicfranzealjuristr

beemansamtsaiklemenoslajthorgoddwaldrumKrustie101

MarcosEllysDevqonAlexTalcurabhaidarDayvissonn3xus

jrgleasonjdpnielsenTheMcMurderkenistewardkentcdoddsLennardWesterveld

waffle-ironNanFengCheongPoujaRironRonen-devblowsie

thm1118Tom-Vdanielcrispfrancisco-sanchez-molinaenricouniurb

You can’t perform that action at this time.