Cacher is the code snippet organizer for pro developers

/* global angular */
(function() {
  
  'use strict';

  var app = angular.module('formlyExample', ['formly', 'formlyBootstrap']);
  
  app.run(function(formlyConfig) {
    formlyConfig.setType({
      name: 'ipAddress',
      extends: 'input',
      defaultOptions: {
        validators: {
          ipAddress: {
            expression: function(viewValue, modelValue) {
              var value = modelValue || viewValue;
              return /(\d{1,3}\.){3}\d{1,3}/.test(value);
            },
            message: '$viewValue + " is not a valid IP Address"'
          }
        }
      }
    });
  });

  app.controller('MainCtrl', function MainCtrl(formlyVersion, User) {
    var vm = this;
    // funcation assignment
    vm.onSubmit = onSubmit;

    // variable assignment
    vm.author = { // optionally fill in your info below :-)
      name: 'Kent C. Dodds',
      url: 'https://twitter.com/kentcdodds' // a link to your twitter/github/blog/whatever
    };
    vm.exampleTitle = 'JSON powered'; // add this
    vm.env = {
      angularVersion: angular.version.full,
      formlyVersion: formlyVersion
    };
    
    // Note, normally I prefer to use the router and resolve
    // async dependencies into my controller, but I think
    // this gives you the idea of what you're supposed to do...
    vm.loadingData = User.getUserData().then(function(result) {
      vm.model = result[0];
      vm.fields = result[1];
      vm.originalFields = angular.copy(vm.fields);
    });

    

    // function definition
    function onSubmit() {
      alert(JSON.stringify(vm.model), null, 2);
    }
  });
  
  app.factory('User', function($timeout, $q) {
    return {
      getFields: getFields,
      getUser: getUser,
      getUserData: getUserData
    };
    
    function getUserData() {
      return $q.all([getUser(), getFields()]);
    }
    
    function getUser() {
      return $timeout(function() {
        return {
          "firstName": "Joan",
          "lastName": "of Arc"
        };
      }, 100);
    }
    
    function getFields() {
      return $timeout(function() {
        return [
          {
            "key": "firstName",
            "type": "input",
            "templateOptions": {
              "label": "First Name"
            }
          },
          {
            "key": "lastName",
            "type": "input",
            "templateOptions": {
              "label": "Last Name"
            }
          },
          {
            "key": "mac",
            "type": "input",
            "templateOptions": {
              "label": "Mac Address",
              "pattern": "([0-9A-F]{2}[:-]){5}([0-9A-F]{2})"
            }
          },
          {
            "key": "ipAddress",
            "type": "ipAddress",
            "templateOptions": {
              "label": "IP Address"
            }
          },
          {
            "key": "color",
            "type": "radio",
            "templateOptions": {
              "label": "Color Preference (try this out)",
              "options": [
                {
                  "name": "No Preference",
                  "value": null
                },
                {
                  "name": "Green",
                  "value": "green"
                },
                {
                  "name": "Blue",
                  "value": "blue"
                }
              ]
            }
          },
          {
            "key": "reason",
            "type": "textarea",
            "templateOptions": {
              "label": "Why?"
            },
            // notice that you can still do expression properties :-)
            "expressionProperties": {
              "templateOptions.label": "'Why did you choose ' + model.color + '?'",
              "hide": "!model.color"
            },
            // you can do validators too :-)
            "validators": {
              "containsAwesome": "$viewValue.indexOf('awesome') !== -1"
            }
          }
        ];
      }, 1500);
    }
  });

})();

body {
  margin: 20px
}

.formly-field {
  margin-bottom: 16px;
}

<!DOCTYPE html>
<html>

  <head>
    <!-- Twitter bootstrap -->
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

    <!-- apiCheck is used by formly to validate its api -->
    <script src="http://rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.min.js"></script>
    <!-- This is the latest version of angular (at the time this template was created) -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

    <!-- This is the current state of master for formly core. -->
    <script src="http://rawgit.com/formly-js/angular-formly/6.0.0-beta.1/dist/formly.js"></script>
    <!-- This is the current state of master for the bootstrap templates -->
    <script src="http://rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.js"></script>

    <title>Angular Formly Example</title>
  <style id="jsbin-css">
body {
  margin: 20px
}

.formly-field {
  margin-bottom: 16px;
}
</style>
</head>

  <body ng-app="formlyExample" ng-controller="MainCtrl as vm">
    <div>
      <h1>angular-formly example: {{vm.exampleTitle}}</h1>
      <div>
        This is an example of powering a form strictly by JSON. The common use case for this
        would be to persist the form configuration in the database and then send the configuration
        up to power the form. Notice that you can still use most features like <code>expressionProperties</code>
        and <code>validators</code> even in a string form.
      </div>
      <hr />
      <div ng-if="vm.loadingData.$$state.status === 0" style="margin:20px 0;font-size:2em">
        <strong>Loading...</strong>
      </div>
      <div ng-if="vm.loadingData.$$status.state !== 0">
        <form ng-submit="vm.onSubmit()" novalidate>
          <formly-form model="vm.model" fields="vm.fields" form="vm.form">
            <button type="submit" class="btn btn-primary submit-button">Submit</button>
          </formly-form>
        </form>
      </div>
      <hr />
      <h2>Model</h2>
      <pre>{{vm.model | json}}</pre>
      <h2>Fields <small>(note, functions are not shown)</small></h2>
      <pre>{{vm.originalFields | json}}</pre>
      <h2>Form</h2>
      <pre>{{vm.form | json}}</pre>
    </div>

    <div style="margin-top:30px">
      <small>
        This is an example for the
        <a href="https://formly-js.github.io/angular-formly">angular-formly</a>
        project made with ♥ by
        <strong>
          <span ng-if="!vm.author.name || !vm.author.url">
            {{vm.author.name || 'anonymous'}}
          </span>
          <a ng-if="vm.author.url" ng-href="{{::vm.author.url}}">
            {{vm.author.name}}
          </a>
        </strong>
        <br />
        This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"
      </small>
    </div>

    <!-- Put custom templates here -->

  <script id="jsbin-javascript">
/* global angular */
(function() {
  
  'use strict';

  var app = angular.module('formlyExample', ['formly', 'formlyBootstrap']);
  
  app.run(function(formlyConfig) {
    formlyConfig.setType({
      name: 'ipAddress',
      extends: 'input',
      defaultOptions: {
        validators: {
          ipAddress: {
            expression: function(viewValue, modelValue) {
              var value = modelValue || viewValue;
              return /(\d{1,3}\.){3}\d{1,3}/.test(value);
            },
            message: '$viewValue + " is not a valid IP Address"'
          }
        }
      }
    });
  });

  app.controller('MainCtrl', function MainCtrl(formlyVersion, User) {
    var vm = this;
    // funcation assignment
    vm.onSubmit = onSubmit;

    // variable assignment
    vm.author = { // optionally fill in your info below :-)
      name: 'Kent C. Dodds',
      url: 'https://twitter.com/kentcdodds' // a link to your twitter/github/blog/whatever
    };
    vm.exampleTitle = 'JSON powered'; // add this
    vm.env = {
      angularVersion: angular.version.full,
      formlyVersion: formlyVersion
    };
    
    // Note, normally I prefer to use the router and resolve
    // async dependencies into my controller, but I think
    // this gives you the idea of what you're supposed to do...
    vm.loadingData = User.getUserData().then(function(result) {
      vm.model = result[0];
      vm.fields = result[1];
      vm.originalFields = angular.copy(vm.fields);
    });

    

    // function definition
    function onSubmit() {
      alert(JSON.stringify(vm.model), null, 2);
    }
  });
  
  app.factory('User', function($timeout, $q) {
    return {
      getFields: getFields,
      getUser: getUser,
      getUserData: getUserData
    };
    
    function getUserData() {
      return $q.all([getUser(), getFields()]);
    }
    
    function getUser() {
      return $timeout(function() {
        return {
          "firstName": "Joan",
          "lastName": "of Arc"
        };
      }, 100);
    }
    
    function getFields() {
      return $timeout(function() {
        return [
          {
            "key": "firstName",
            "type": "input",
            "templateOptions": {
              "label": "First Name"
            }
          },
          {
            "key": "lastName",
            "type": "input",
            "templateOptions": {
              "label": "Last Name"
            }
          },
          {
            "key": "mac",
            "type": "input",
            "templateOptions": {
              "label": "Mac Address",
              "pattern": "([0-9A-F]{2}[:-]){5}([0-9A-F]{2})"
            }
          },
          {
            "key": "ipAddress",
            "type": "ipAddress",
            "templateOptions": {
              "label": "IP Address"
            }
          },
          {
            "key": "color",
            "type": "radio",
            "templateOptions": {
              "label": "Color Preference (try this out)",
              "options": [
                {
                  "name": "No Preference",
                  "value": null
                },
                {
                  "name": "Green",
                  "value": "green"
                },
                {
                  "name": "Blue",
                  "value": "blue"
                }
              ]
            }
          },
          {
            "key": "reason",
            "type": "textarea",
            "templateOptions": {
              "label": "Why?"
            },
            // notice that you can still do expression properties :-)
            "expressionProperties": {
              "templateOptions.label": "'Why did you choose ' + model.color + '?'",
              "hide": "!model.color"
            },
            // you can do validators too :-)
            "validators": {
              "containsAwesome": "$viewValue.indexOf('awesome') !== -1"
            }
          }
        ];
      }, 1500);
    }
  });

})();
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>

  <head>
    <\!-- Twitter bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

    <\!-- apiCheck is used by formly to validate its api -->
    <script src="//rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.min.js"><\/script>
    <\!-- This is the latest version of angular (at the time this template was created) -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"><\/script>

    <\!-- This is the current state of master for formly core. -->
    <script src="//rawgit.com/formly-js/angular-formly/6.0.0-beta.1/dist/formly.js"><\/script>
    <\!-- This is the current state of master for the bootstrap templates -->
    <script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.js"><\/script>

    <title>Angular Formly Example</title>
  </head>

  <body ng-app="formlyExample" ng-controller="MainCtrl as vm">
    <div>
      <h1>angular-formly example: {{vm.exampleTitle}}</h1>
      <div>
        This is an example of powering a form strictly by JSON. The common use case for this
        would be to persist the form configuration in the database and then send the configuration
        up to power the form. Notice that you can still use most features like <code>expressionProperties</code>
        and <code>validators</code> even in a string form.
      </div>
      <hr />
      <div ng-if="vm.loadingData.$$state.status === 0" style="margin:20px 0;font-size:2em">
        <strong>Loading...</strong>
      </div>
      <div ng-if="vm.loadingData.$$status.state !== 0">
        <form ng-submit="vm.onSubmit()" novalidate>
          <formly-form model="vm.model" fields="vm.fields" form="vm.form">
            <button type="submit" class="btn btn-primary submit-button">Submit</button>
          </formly-form>
        </form>
      </div>
      <hr />
      <h2>Model</h2>
      <pre>{{vm.model | json}}</pre>
      <h2>Fields <small>(note, functions are not shown)</small></h2>
      <pre>{{vm.originalFields | json}}</pre>
      <h2>Form</h2>
      <pre>{{vm.form | json}}</pre>
    </div>

    <div style="margin-top:30px">
      <small>
        This is an example for the
        <a href="https://formly-js.github.io/angular-formly">angular-formly</a>
        project made with ♥ by
        <strong>
          <span ng-if="!vm.author.name || !vm.author.url">
            {{vm.author.name || 'anonymous'}}
          </span>
          <a ng-if="vm.author.url" ng-href="{{::vm.author.url}}">
            {{vm.author.name}}
          </a>
        </strong>
        <br />
        This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"
      </small>
    </div>

    <\!-- Put custom templates here -->

  </body>

</html>
</script>

<script id="jsbin-source-css" type="text/css">body {
  margin: 20px
}

.formly-field {
  margin-bottom: 16px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">/* global angular */
(function() {
  
  'use strict';

  var app = angular.module('formlyExample', ['formly', 'formlyBootstrap']);
  
  app.run(function(formlyConfig) {
    formlyConfig.setType({
      name: 'ipAddress',
      extends: 'input',
      defaultOptions: {
        validators: {
          ipAddress: {
            expression: function(viewValue, modelValue) {
              var value = modelValue || viewValue;
              return /(\d{1,3}\.){3}\d{1,3}/.test(value);
            },
            message: '$viewValue + " is not a valid IP Address"'
          }
        }
      }
    });
  });

  app.controller('MainCtrl', function MainCtrl(formlyVersion, User) {
    var vm = this;
    // funcation assignment
    vm.onSubmit = onSubmit;

    // variable assignment
    vm.author = { // optionally fill in your info below :-)
      name: 'Kent C. Dodds',
      url: 'https://twitter.com/kentcdodds' // a link to your twitter/github/blog/whatever
    };
    vm.exampleTitle = 'JSON powered'; // add this
    vm.env = {
      angularVersion: angular.version.full,
      formlyVersion: formlyVersion
    };
    
    // Note, normally I prefer to use the router and resolve
    // async dependencies into my controller, but I think
    // this gives you the idea of what you're supposed to do...
    vm.loadingData = User.getUserData().then(function(result) {
      vm.model = result[0];
      vm.fields = result[1];
      vm.originalFields = angular.copy(vm.fields);
    });

    

    // function definition
    function onSubmit() {
      alert(JSON.stringify(vm.model), null, 2);
    }
  });
  
  app.factory('User', function($timeout, $q) {
    return {
      getFields: getFields,
      getUser: getUser,
      getUserData: getUserData
    };
    
    function getUserData() {
      return $q.all([getUser(), getFields()]);
    }
    
    function getUser() {
      return $timeout(function() {
        return {
          "firstName": "Joan",
          "lastName": "of Arc"
        };
      }, 100);
    }
    
    function getFields() {
      return $timeout(function() {
        return [
          {
            "key": "firstName",
            "type": "input",
            "templateOptions": {
              "label": "First Name"
            }
          },
          {
            "key": "lastName",
            "type": "input",
            "templateOptions": {
              "label": "Last Name"
            }
          },
          {
            "key": "mac",
            "type": "input",
            "templateOptions": {
              "label": "Mac Address",
              "pattern": "([0-9A-F]{2}[:-]){5}([0-9A-F]{2})"
            }
          },
          {
            "key": "ipAddress",
            "type": "ipAddress",
            "templateOptions": {
              "label": "IP Address"
            }
          },
          {
            "key": "color",
            "type": "radio",
            "templateOptions": {
              "label": "Color Preference (try this out)",
              "options": [
                {
                  "name": "No Preference",
                  "value": null
                },
                {
                  "name": "Green",
                  "value": "green"
                },
                {
                  "name": "Blue",
                  "value": "blue"
                }
              ]
            }
          },
          {
            "key": "reason",
            "type": "textarea",
            "templateOptions": {
              "label": "Why?"
            },
            // notice that you can still do expression properties :-)
            "expressionProperties": {
              "templateOptions.label": "'Why did you choose ' + model.color + '?'",
              "hide": "!model.color"
            },
            // you can do validators too :-)
            "validators": {
              "containsAwesome": "$viewValue.indexOf('awesome') !== -1"
            }
          }
        ];
      }, 1500);
    }
  });

})();</script></body>

</html>