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.
Include the FormlyForm component import in the directives
attribute of your Component
and put this in your template
<form class="formly" role="form" novalidate [formGroup]="form" (ngSubmit)="submit(user)">
<formly-form [model]="user" [fields]="userFields">
<button type="submit" class="btn btn-default">Button</button>
</formly-form>
</form>
and in your TypeScript file define the the model
and fields
attributes
this.userFields = [{
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, ValidationService.emailValidator])
}
}, {
className: 'col-xs-6',
key: 'password',
type: 'input',
templateOptions: {
type: 'password',
label: 'Password',
placeholder: 'Password',
pattern: ''
},
validators: {
validation: Validators.compose([Validators.required, Validators.maxLength(10), Validators.minLength(2)])
}
}]
}];
this.user = {
email: 'email@gmail.com',
checked: false
};
- install
ng2-formly
npm install ng2-formly --save
- add the script to the HTML file (if necessary)
<!-- index.html -->
<script src="node_modules/ng2-formly/bundles/ng2-formly.umd.min.js"></script>
- and to your component add
import {Component} from '@angular/core';
import {FormBuilder, FormGroup} from "@angular/forms";
import {FormlyFieldConfig} from "ng2-formly";
@Component({
selector: 'app-root',
template: `
<h1>Hello, {{name}}!</h1>
Say hello to: <input [value]="name" (input)="name = $event.target.value">
<formly-form [model]="user" [fields]="userFields"></formly-form>
`,
})
export class HelloApp {
form: FormGroup;
userFields: FormlyFieldConfig[];
user: any = {}
constructor(fb: FormBuilder) {
this.form = fb.group({});
this.userFields = [{
key: 'nameOfPerson',
type: 'input',
templateOptions: {
label: "Say hello to",
placeholder: "Name of the person"
}
}]
}
}
@NgModule({
declarations: [
HelloApp, FormlyFieldToggle, FormlyWrapperHorizontalLabel
],
imports: [
BrowserModule,
FormlyModule.forRoot({
}),
FormlyBootstrapModule,
FormsModule,
ReactiveFormsModule,
],
bootstrap: [HelloApp]
})
export class FormlyDemoModule {
}
platformBrowserDynamic().bootstrapModule(FormlyDemoModule);
From there, it's just JavaScript. Allowing for DRY, maintainable, reusable forms.
See the issues labeled enhancement
A special thanks to Kent C. Dodds for giving me opportunity to work on this. This library is maintained (with love) by me, Mohammed Zama Khan. Thanks to all contributors! If you're trying to find angular-formly, go here
Thanks goes to these wonderful people (emoji key):
Zama Khan Mohammed π π» π π π π§ |
Abdellatif Ait boudad π» π |
divyakumarjain π» π π π π |
Pouja π» π |
Caleb Kniffen π |
Riron π |
Thiago Lacerda π |
---|---|---|---|---|---|---|
danielcrisp π π» |
This project follows the all-contributors specification. Contributions of any kind welcome!