# ng-formly [![Angular Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide) [![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors) [![Stories in Ready](https://badge.waffle.io/formly-js/ng-formly.png?label=ready&title=Ready)](https://waffle.io/formly-js/ng-formly) Status: [![Build Status](https://travis-ci.org/formly-js/ng-formly.svg?branch=master)](https://travis-ci.org/formly-js/ng-formly) [![npm version](https://badge.fury.io/js/ng-formly.svg)](https://badge.fury.io/js/ng-formly) [![devDependencies Status](https://david-dm.org/formly-js/ng-formly/dev-status.svg)](https://david-dm.org/formly-js/ng-formly?type=dev) [![Package Quality](http://npm.packagequality.com/shield/ng-formly.png)](http://packagequality.com/#?package=ng-formly) [![Known Vulnerabilities](https://snyk.io/test/github/formly-js/ng-formly/badge.svg)](https://snyk.io/test/github/formly-js/ng-formly) [![codecov.io](http://codecov.io/github/formly-js/ng-formly/coverage.svg?branch=master)](http://codecov.io/github/formly-js/ng-formly?branch=master) Links: [![Gitter](https://badges.gitter.im/formly-js/angular2-formly.svg)](https://gitter.im/formly-js/angular2-formly?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) angular2-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 forms. ## Quick Start #### 1. Install ng-formly ```bash npm install ng-formly --save ``` #### 2. Import the `FormlyModule`: ```ts import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {BrowserModule} from '@angular/platform-browser'; import {FormlyModule, FormlyBootstrapModule} from 'ng-formly'; import {AppComponent} from './app'; @NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule, FormlyModule.forRoot(), FormlyBootstrapModule, ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } ``` #### 3. Define the form config in your component: ```ts import {Component} from '@angular/core'; import {Validators, FormGroup} from '@angular/forms'; import {FormlyFieldConfig} from 'ng-formly'; @Component({ selector: 'app', template: ` `, }) export class HelloApp { form: FormGroup = new FormGroup({}); userFields: Array = [{ className: 'row', fieldGroup: [{ className: 'col-xs-6', key: 'email', type: 'input', templateOptions: { type: 'email', label: 'Email address', placeholder: 'Enter email' }, validators: { validation: Validators.compose([Validators.required]) } }, { className: 'col-xs-6', key: 'password', type: 'input', templateOptions: { type: 'password', label: 'Password', placeholder: 'Password', pattern: '' }, validators: { validation: Validators.compose([Validators.required]) } }] }]; user = { email: 'email@gmail.com', checked: false }; submit(user) { console.log(user); } } ``` 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) ## Supported templates - [Material2](https://github.com/formly-js/ng-formly/issues/335) - [Bootstrap](https://github.com/formly-js/ng-formly/tree/master/src/ui-bootstrap) ```ts import {FormlyBootstrapModule} from 'ng-formly'; ``` ## 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)): | [

_{Zama Khan Mohammed}](https://www.linkedin.com/in/mohammedzamakhan)
[📖](https://github.com/formly-js/ng-formly/commits?author=mohammedzamakhan) [💻](https://github.com/formly-js/ng-formly/commits?author=mohammedzamakhan) 👀 💁 🚇 🔧 | [

_{Abdellatif Ait boudad}](https://github.com/aitboudad)
[💻](https://github.com/formly-js/ng-formly/commits?author=aitboudad) [📖](https://github.com/formly-js/ng-formly/commits?author=aitboudad) [⚠️](https://github.com/formly-js/ng-formly/commits?author=aitboudad) 👀 💁 | [

_{divyakumarjain}](https://github.com/divyakumarjain)
[💻](https://github.com/formly-js/ng-formly/commits?author=divyakumarjain) [📖](https://github.com/formly-js/ng-formly/commits?author=divyakumarjain) 🔌 👀 💁 | [

_Pouja](https://github.com/Pouja)
[💻](https://github.com/formly-js/ng-formly/commits?author=Pouja) 👀 | [

_{Caleb Kniffen}](http://twitter.com/ckniffty)
[🐛](https://github.com/formly-js/ng-formly/issues?q=author%3Ackniffen) | [

_Riron](https://github.com/Riron)
[🐛](https://github.com/formly-js/ng-formly/issues?q=author%3ARiron) | [

_{Thiago Lacerda}](https://github.com/thiagogjt)
[🐛](https://github.com/formly-js/ng-formly/issues?q=author%3Athiagogjt) | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | [

_danielcrisp](https://github.com/danielcrisp)
[🐛](https://github.com/formly-js/ng-formly/issues?q=author%3Adanielcrisp) [💻](https://github.com/formly-js/ng-formly/commits?author=danielcrisp) | [

_{Tony Franzese}](https://github.com/franzeal)
[🐛](https://github.com/formly-js/ng-formly/issues?q=author%3Afranzeal) [💻](https://github.com/formly-js/ng-formly/commits?author=franzeal) | [

_{Jackie Gleason}](http://JackieRGleason.com)
[🐛](https://github.com/formly-js/ng-formly/issues?q=author%3Ajrgleason) [💻](https://github.com/formly-js/ng-formly/commits?author=jrgleason) | [

_ampsarfraz](https://github.com/ampsarfraz)
[🐛](https://github.com/formly-js/ng-formly/issues?q=author%3Aampsarfraz) | [

_Krustie101](https://github.com/Krustie101)
[🐛](https://github.com/formly-js/ng-formly/issues?q=author%3AKrustie101) [💻](https://github.com/formly-js/ng-formly/commits?author=Krustie101) | [

_ultimafirez](https://github.com/ultimafirez)
[🐛](https://github.com/formly-js/ng-formly/issues?q=author%3Aultimafirez) | This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

	Stars	Issues	Version	Updated	Created
@ng-dynamic-forms/core			18.0.0	9 months ago	7 years ago
formio	1,959	40	4.1.0	2 days ago	9 years ago
ng-formly			2.0.0	7 years ago	7 years ago
ngx-forms			1.1.11	6 years ago	7 years ago
ngx-schema-form	481	119	2.11.0	6 months ago	6 years ago

@ng-dynamic-forms/core vs formio vs ng-formly vs ngx-forms vs ngx-schema-form

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past