Toktik/ngx-formly

JSON powered / Dynamic forms for Angular

JSON powered / Dynamic forms in Angular

---

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

• Documentation, demos, and guides

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

• Abdellatif Ait boudad
• Mohammed Zama Khan
• Kent C. Dodds
• All contributors!

Contributors

Thanks goes to these wonderful people: