@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
FormlyModule
and UI (pre-defined types/templates):
3. Import the 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):