/ angularjs

Why and How should I use Angular Formly

Angular Formly is JavaScript Powered Forms for AngularJS, it lets you generate html forms automatically without much of an effort. Just tell Formly which model you want the form for, define the keys for the fields and just like that you are all setup.

How difficult or easy it is to write HTML, depending on who you ask their opinion might differ, even for an expert HTML developer the process of writing same block of html time and time again might get really repetitive and frustrating.

A generator reduces that effort by generalizing things and make them available automatically when we need them. Formly does just that, it reduces the effort of writing html form but still delivers it the way we want it, customising Formly can be difficult job sometime but once you achieve it, its there and you can replicate the same a million times if you want it.

If you've come across Crispy Forms in Django which is for Python, Formly does the exact same thing in Angular/Javascript, it takes in some parameters and dumps the html form for you.

Installing Angular Formly:

User Bower:

bower install angular-formly

Using Cdn

<script src="//npmcdn.com/[email protected]/dist/formly.js"></script>

Github:

https://github.com/formly-js/angular-formly

Installation:

angular.module("myApp", ["formly"]); // inject formly in you application


// in your controller

  $scope.user = {}; // the model 'user'

  $scope.userFields = [
{
  key: 'email',
  type: 'input',
  templateOptions: {
      required: true,
    type: 'email',
    label: 'Email address',
    placeholder: 'Enter email'
  }
},
{
  key: 'password',
  type: 'input',
  templateOptions: {
      required: true,
    type: 'password',
    label: 'Password',
    placeholder: 'Password'
  }
}
 ]; // fields/keys we need in the model as a list 

// in your template

<formly-form model="user" fields="userFields">
      <button type="submit" class="btn btn-default" ng-click="submit(user)">Submit</button>
</formly-form>

*code excerpt from documentation

See the Pen Angular Formly Example by Naveen Singh (@official_naveen) on CodePen.

There you go! that's all we need to generate the basic form, we can do a whole lot with this, i'm planning to cover more on Formly as we move, there are plethora of different form fields and types as well as additional plugins that can be embedded in Formly.

But that's all for now!

Hope this helps. Happy Coding!

Naveen Singh

Naveen Singh

I am Full Stack Developer from India who loves design, I use Python and Javascript to curb my cravings, with additional dosages of various web and mobile frameworks.

Read More