/ngx-formly

JSON powered / Dynamic forms for Angular

Primary LanguageTypeScriptMIT LicenseMIT


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:

aitboudadmohammedzamakhandivyakumarjaincouzicjuristrfranzeal

beemanklemenoslajsamtsaithorgoddwaldrumKrustie101

MarcosEllysryanjerskineDevqonAlexTalcuranewsashbhaidar

DayvissonintellixenricouniurbFritzHerbersjrgleasonjohannesjo

jdpnielsenTheMcMurderkenistewardkentcdoddsLennardWesterveldLucasJAlba

lucienbertinwaffle-ironmathijshooglandNanFengCheongPoujaRiron

Ronen-devblowsiethm1118Tom-Vdanielcrispfrancisco-sanchez-molina

n3xus