Power of Form Models
Formly is an Angular module that transforms HTML forms to Javascript/JSON configured forms. Over the past two weeks I have been using Formly to transform HTML forms and saw the benefits of how much time is saved and how much code has been condensed through this process.
The image below shows a sample Address Form in HTML using Bootstrap. Using the NGX-Formly library we can change to this after we complete our form model.
In this case Formly helped reduce the logic shown above. Let’s see how we can recreate this
Step 1:
Install @angular/forms and @ngx-formly/core packages using the command:
npm install @angular/forms @ngx-formly/core –save
Step 2:
Next, install the desired UI package using the command:
npm install @ngx-formly/<package-name> --save
Step 3:
Import the Formly module and UI template to our Angular-cli app
import {NgModule} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {FormlyModule} from '@ngx-formly/core';
import {FormlyBootstrapModule} from '@ngx-formly/bootstrap';
@NgModule({ imports: [ ...,
ReactiveFormsModule,
FormlyModule.forRoot(),
FormlyBootstrapModule, ], })
export class AppModule {} from '@ngx-formly/bootstrap';
Step 4:
Add the following logic to the desired component in Angular-cli. This uses a sample Address form as our example.
export class AppComponent {
form = new FormGroup({});
model = { email: 'email@gmail.com' };
fields: FormlyFieldConfig[] = [{
{
key: 'address',
wrappers: ['panel'],
templateOptions: { label: 'Address' },
fieldGroup: [
{
key: 'addressLine1',
type: 'input',
templateOptions: {
required: true,
type: 'text',
label: 'Address Line 1'
}
},
{
key: 'addressLine2',
type: 'input',
templateOptions: {
required: true,
type: 'text',
label: 'Address Line 2'
}
},
{
key: 'city',
type: 'input',
templateOptions: {
required: true,
type: 'text',
label: 'City'
}
},
{
key: 'state',
type: 'select',
templateOptions: {
required: true,
options: States,
valueProp: 'abbreviation',
labelProp: 'name',
label: 'State'
}
},
{
key: 'zip',
type: 'input',
templateOptions: {
required: true,
type: 'text',
label: 'Zip'
}
}
]
}
}];
submit(model) {
console.log(model);
}}
I hope this introduction to Formly gives you the confidence to refactor your own Angular apps using the NGX-Formly module. If you have questions or wants to know more, feel free to comment below.