Supercharge your Web Forms using Angular – Formly

Forms, as we all know, are a vital part of web development. All of us who are familiar with AngularJS will agree with the fact that how easy it is to develop robust scalable from-ends using AngularJS.

But it comes with its own problems, one of the biggest being how to deal with big forms. The HTML bloats up, becomes unreadable to human-eye, too many tags, validations in each of the numerous fields and many more! We faced this in one of our projects. This project has more than 20 forms with each of them containing at least 60 fields. We had to invest a lot of time and effort into finding a workable solution to this recurring problem.

We found an optimum solution in the form of ‘Angular-Formly’- an open source module maintained by Kent C.Dodds. As the official documentation also says, Angular-Formly gives your forms consistency, maintainability, simplicity, flexibility and sanity!

Angular-Formly suggests maintaining less HTML in favour of JavaScript.

An example of this ideology is cited on the angular-formyl site as well. Using the module we can go from:

Create an array called vm.customerFields with the objects describing the fields in the form.

Key: Form field objects need a unique key which generally describes what the purpose of the field.

Type: The form types such as input, textarea, select, radio etc needs to be registered with the formlyConfig service/provider. (Already done for the Bootstrap templates)

TemplateOptions: This is an object where we further describe the properties for the field like – the kind of input, label and placeholder, whether the field is required. To add more fields in the form just add more objects into this array. This is very easy to maintain and edit anytime.

Gist

Hopefully we were able to elaborate some of the advantages of using Angular-Formly. It has very good documentation with tons of examples. There are prebuilt templates for Bootstrap,LumX, and Vanilla HTML and WIP template libraries for angular material,Iconic and foundation. It is very easy to create custom templates and reuse them. Configuring validations is a cake walk.

if you are a newcomer to angular, you should check out the official angular-formly website. You can get in touch with the module’s maintainer, Kent.C.Dodds for any questions or help. He is super responsive to any queries.