Introduction to NGX-Formly for Automatic Form Generation

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.