Dependencies

Angular - HTML enhanced for web apps
api-check - VanillaJS version of ReactJS propTypes

Install in your project

Getting the files

Install via npm, bower, or simply download the script and its dependencies.

Using npm

$ npm install angular api-check angular-formly --save

Using bower

$ bower install angular api-check angular-formly --save

Download

Adding to your project

Webpack

I recommend using webpack for building your applications. To add angular-formly to your project, get the files via npm, then simply:

var angular = require('angular');
angular.module('yourModule', [require('angular-formly')]);

Browserify

If you're using browserify, in addition to the webpack configuration above, you'll need to make sure you install api-check and angular-formly using npm (bower will not work). Also, no browserify shim or dependency listing in your package.json's browserify configuration object is necessary.

Script Tags

If you're stuck with script tags (I'm sorry), here's how you might do it:

<script src="vendor/apiCheck.js"></script> <!-- must appear before formly.js -->
<script src="vendor/angular.js"></script>
<script src="vendor/formly.js"></script>

and

angular.module('yourModule', ['formly']);

Adding Templates

angular-formly does not ship with any pre-defined types/templates (intentionally). You'll need to either create your own or use a template library. See Custom Templates.

Quick Example

You can add a formly-form in your HTML templates as shown below. This example is using the angular-formly-templates-bootstrap template library. (Note, there are three files here, click the link above the code).

angular.module('myModule', ['formly', 'formlyBootstrap']);

<form ng-submit="vm.onSubmit()">
  <formly-form model="vm.user" fields="vm.userFields">
    <button type="submit">Submit</button>
  </formly-form>
</form>

angular.module('myModule').controller('MyFormCtrl', function MyFormCtrl() {
  var vm = this; // vm stands for "View Model" --> see https://github.com/johnpapa/angular-styleguide#controlleras-with-vm
  vm.user = {};

  vm.userFields = [
    {
      // the key to be used in the model values
      // so this will be bound to vm.user.username
      key: 'username',
      type: 'input',
      templateOptions: {
        label: 'Username',
        placeholder: 'johndoe',
        required: true,
        description: 'Descriptive text'
      }
    },
    {
      key: 'password',
      type: 'input',
      templateOptions: {
        type: 'password',
        label: 'Password',
        required: true
      },
      expressionProperties: {
        'templateOptions.disabled': '!model.username' // disabled when username is blank
      }
    }
  ];
  
  vm.onSubmit = onSubmit;
  
  
  function onSubmit() {
    console.log('form submitted:', vm.user);
  }
});

There is so much more that you can do with this library. See the rest of the documentation and the examples for more!

Learn angular-formly

The best place to get started from here is to actually learn angular-formly! I have developed several short egghead.io lessons about angular-formly concepts that should get you going. These and more resources are available (for free) on the Learn angular-formly page :-)