Introduction to ngx-formly

The @ngx-formly is a great library for building up forms quickly with a lot of customization but the limitation comes when you want to implement your custom templates using formly. Well, it’s not really a limitation the library is written so well that you can build your own types, wrappers and much more in a matter for minutes.

Firstly, let’s understand what formly does. It takes a template previously built and injects into the template at the runtime. This also helps to maintain consistency all throughout the app. The starting may seem complex (which is not really after you understand ) but it helps a lot. Not going over the basic setup as it’s quite easy but one point to highlight is that formly creates REACTIVE-FORMS, so you need to have ReactiveFormsModule as a dependency wherever you use formly.

TYPES :

Now, these are form fields like input, select, radio etc. Normally there’s a form-control attached to it. Let’s dig in the code shall we?

import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';
//  Custom text field with extra classes and all
@Component({
 selector: 'app-formly-field-custom-input',
 template: `
  <label>{{ to.label }}</label>
  <input [type]="to.type" class="form-control bg-secondary text-white" [formControl]="formControl" [placeholder]="to.placeholder">
`,
})
export class FormlyFieldTextInputComponent extends FieldType { }

and that’s it. All you need to implement a custom input element. Remember this itself is just a component which extends FieldType of formly. Just change the inside of a template to anything of your choice. Pass config using templateOptions which becomes to when you write the above code.

WRAPPERS

Another interesting thing in formly is wrappers that can group together some form fields. Technically it works similarly to reactive form-group.

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { FieldWrapper } from '@ngx-formly/core';
@Component({
 template: `
  <accordion>
   <accordion-group [heading]="to.label">
    <ng-template #fieldComponent></ng-template>
   </accordion-group>
  </accordion>
`,
})
export class FormlyWrapperAccordianComponent extends FieldWrapper {
@ViewChild('fieldComponent', { read: ViewContainerRef }) fieldComponent: ViewContainerRef;
}

This is a simple ngx-bootstrap accordian used to group together any number of fields. It implements FieldWrapper interface and look at the #fieldComponent , this is actually where the form fields are injected.

REGISTER YOUR CUSTOM TEMPLATES

This is absolutely necessary if you want to use your custom types and wrappers. Here’s how you do it:

FormlyModule.forRoot({
 types: [{
  name: 'input',
  component: FormlyFieldTextInputComponent
 }],
 wrappers: [{
  name: 'accordian',
  component: FormlyWrapperAccordianComponent
 }]
})

And that’s it. Now it’s time to reap the benefits of our hard work.

...
{
 key: 'input',
 type: 'custom-text',
 wrappers: ['accordian'], 
 templateOptions: {
  label: 'Custom text field', 
  placeholder: 'Custom text placeholder',
  required: true,
 },
}
...

And everything will fall in place.

To look at the full code go to https://github.com/jashanbhullar/intro-to-ngx-formly

Check out the deployed version at https://jashanbhullar.github.io/intro-to-ngx-formly/

Let me know if missed something. Happy Coding :)