Dependencies

Angular - HTML enhanced for web apps
apiCheck.js - 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')]);

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']);

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!