# @ngx-formly
[](https://angular.io/styleguide)
[](#contributors)
[](https://waffle.io/formly-js/ngx-formly)
Status:
[](https://travis-ci.org/formly-js/ngx-formly)
[](https://badge.fury.io/js/%40ngx-formly%2Fcore)
[](https://david-dm.org/formly-js/ng-formly?type=dev)
[](http://packagequality.com/#?package=ng-formly)
[](https://snyk.io/test/github/formly-js/ng-formly)
[](http://codecov.io/github/formly-js/ng-formly?branch=master)
Links:
[](https://gitter.im/formly-js/angular2-formly?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[](http://makeapullrequest.com)
Ngx Formly is a dynamic JSON powered form library for Angular (mainly based an on [Angular Reactive Forms](https://angular.io/guide/reactive-forms)) that bring unmatched maintainability to your application's forms.
**Supported UI libs**
| UI | |
| ------------------------------------------------- | - |
| [Bootstrap](https://getbootstrap.com) | ✅ |
| [Ionic](https://ionicframework.com) | ✅ |
| [Kendo](http://www.telerik.com/kendo-angular-ui) | ✅ |
| [Material2](https://github.com/angular/material2) | ✅ |
| [PrimeNG](http://primefaces.org/primeng/#/) | ✅ |
| [NativeScript](https://www.nativescript.org) | ❌ |
**Which Version to use?**
| Angular version | Formly version |
| --------------- | ---------------------- |
| 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](https://formly-js.github.io/ngx-formly)
* StackBlitz Template
* [UI Bootstrap](https://stackblitz.com/edit/ngx-formly-ui-bootstrap)
* [UI Material](https://stackblitz.com/edit/ngx-formly-ui-material)
* [UI Ionic](https://stackblitz.com/edit/ngx-formly-ui-ionic)
* [UI PrimeNG](https://stackblitz.com/edit/ngx-formly-ui-primeng)
* [UI Kendo](https://stackblitz.com/edit/ngx-formly-ui-kendo)
## Quick Start
Follow these steps to get started with Ngx Formly. Also check out our [demos](https://formly-js.github.io/ngx-formly) for further examples.
#### 1. Install @angular/forms and @ngx-formly/core packages:
```bash
npm install @angular/forms @ngx-formly/core --save
```
#### 2. Choose and install your UI (pre-defined types/templates) package:
- [Material2](https://github.com/angular/material2):
1. Ensure you have already installed material2 https://material.angular.io/guide/getting-started
2. Install `@ngx-formly/material`
```bash
npm install @ngx-formly/material --save
```
- [Bootstrap](https://getbootstrap.com):
```bash
npm install @ngx-formly/bootstrap --save
```
- [Ionic](https://ionicframework.com):
```bash
npm install @ngx-formly/ionic --save
```
- [PrimeNG](http://primefaces.org/primeng/#/):
```bash
npm install @ngx-formly/primeng --save
```
- [Kendo](http://www.telerik.com/kendo-angular-ui):
```bash
npm install @ngx-formly/kendo --save
```
#### 3. Import the `FormlyModule` and UI (pre-defined types/templates):
```typescript
import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {FormlyModule} from '@ngx-formly/core';
import {FormlyBootstrapModule} from '@ngx-formly/bootstrap';
// for material2 import `FormlyMaterialModule`:
// import {FormlyMaterialModule} from '@ngx-formly/material';
// for ionic import `FormlyIonicModule`:
// import {FormlyIonicModule} from '@ngx-formly/ionic';
// for primeng import `FormlyPrimeNGModule`:
// import {FormlyPrimeNGModule} from '@ngx-formly/primeng';
// for kendo import `FormlyKendoModule`:
// import {FormlyKendoModule} from '@ngx-formly/kendo';
@NgModule({
imports: [
...,
ReactiveFormsModule,
FormlyModule.forRoot(),
FormlyBootstrapModule,
// for material2:
// FormlyMaterialModule
// for ionic:
// FormlyIonicModule
// for primeng:
// FormlyPrimeNGModule
// for kendo:
// FormlyKendoModule
],
})
export class AppModule {}
```
#### 3. Define the form config in your component:
```typescript
import {Component} from '@angular/core';
import {FormGroup} from '@angular/forms';
import {FormlyFieldConfig} from '@ngx-formly/core';
@Component({
selector: 'app',
template: `
`,
})
export class AppComponent {
form = new FormGroup({});
model = { email: 'email@gmail.com' };
fields: FormlyFieldConfig[] = [{
key: 'email',
type: 'input',
templateOptions: {
type: 'email',
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.
## Roadmap
See the [issues labeled enhancement](https://github.com/formly-js/angular2-formly/labels/enhancement)
## Thanks
A special thanks to [Kent C. Dodds](https://twitter.com/kentcdodds) for giving me opportunity to work on this.
This library is maintained (with love) by me, [Mohammed Zama Khan](https://twitter.com/mohamedzamakhan).
Thanks to all [contributors](https://github.com/formly-js/angular2-formly/graphs/contributors)!
If you're trying to find angular-formly, go [here](https://github.com/formly-js/angular-formly)
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
[
](https://github.com/aitboudad)[
](https://github.com/mohammedzamakhan)[
](https://github.com/divyakumarjain)[
](https://github.com/couzic)[
](https://github.com/franzeal)[
](https://github.com/beeman)
[
](https://github.com/juristr)[
](https://github.com/dwaldrum)[
](https://github.com/Krustie101)[
](https://github.com/MarcosEllys)[
](https://github.com/thorgod)[
](https://github.com/AlexTalcura)
[
](https://github.com/Dayvisson)[
](https://github.com/jrgleason)[
](https://github.com/n3xus)[
](https://github.com/kentcdodds)[
](https://github.com/LennardWesterveld)[
](https://github.com/waffle-iron)
[
](https://github.com/MathijsHoogland)[
](https://github.com/Pouja)[
](https://github.com/Riron)[
](https://github.com/Ronen-dev)[
](https://github.com/blowsie)[
](https://github.com/samtsai)
[
](https://github.com/Tom-V)[
](https://github.com/danielcrisp)[
](https://github.com/francisco-sanchez-molina)[
](https://github.com/TheMcMurder)