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!
An example of this ideology is cited on the angular-formyl site as well. Using the module we can go from:
Getting Started with Formly1. Add the following files in index.html <!– angular and required files for angular formly –> <script src=”lib/angular-formly/api-check.min.js”></script> <!– For Validations in Angular formly using ngMessage required angular version is 1.4.7 –> <script src=”lib/angular/angular_v1_4_7.min.js”></script> <script src=”lib/angular-formly/ui-bootstrap-tpls.min.js”></script> <script src=”lib/fileInput/fileinput.min.js”></script> <script src=”lib/angular-formly/formly.min.js”></script> <script src=”lib/angular-formly/angular-formly-templates-bootstrap.min.js”></script> <script src=”lib/angular-message/angular-messages.min.js”></script> <script src=”lib/angular-formly/angular-animate.min.js”></script>
- Now add formly and formlyBootstrap as a dependency in app.js. You can also add ngAnimate and ngMessages which shows error messages at the time of validation.
- Now set up angular formly form in HTML.
- Set Up the Controller