ngx-formly is an Angular 2 module which has a Components to help customize and render JavaScript/JSON configured forms. The formly-form Component and the FormlyConfig service are very powerful and bring unmatched maintainability to your application's form


Keywords
angular, forms, ngx-formly, formly, angular 2, angular 2 forms, json forms, form library, dynamic-forms, bootstrap, ionic, json-forms, json-schema, kendo-ui, material, nativescript, ng-zorro, ng-zorro-antd, primeng, schematics
License
MIT
Install
npm install @ngx-formly/bootstrap@6.0.0-next.1

Documentation


JSON powered / Dynamic forms in Angular

Npm version Downloads Gitter Build Status Twitter


Formly is a dynamic (JSON powered) form library for Angular that bring unmatched maintainability to your application's forms.

Features

  • 🔥 Automatic forms generation
  • 📝 Easy to extend with custom field type, validation, wrapper and extension.
  • ⚡️ Support multiple schemas:
    • Formly Schema (core)
    • JSON Schema
  • 😍 A bunch of themes, out of the box!
  • 💪 Build on top of Angular Reactive Forms
  • 😱 Drag and Drop Editor (coming 🔜)

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