Form generator using JSON

Use an JSON object to describe a form

by Renoir Boulanger

HTML

<script src="https:npmcdn.com/api-check@latest/dist/api-check.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://npmcdn.com/api-check@latest/dist/api-check.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/formly.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/angular-formly-templates-bootstrap.js"></script>
  <section ng-app="renoirChallenge" ng-controller="UserProfileCtrl as view">
    <div class="container">
      <h1>{{::view.title}}</h1>
      <form ng-submit="view.onSubmit()" name="view.form" novalidate>
        <formly-form model="view.model" fields="view.fields" options="view.options" form="view.form">
          <div class=well>
            <button type="submit" class="btn btn-primary submit-button" ng-disabled="view.form.$invalid">Submit</button>
            <button type="button" class="btn btn-default" ng-click="view.options.resetModel()">Reset</button>
          </div>
        </formly-form>
      </form>
      <h2>Form Data</h2>
      <pre>{{view.model | json}}</pre>
    </div>
</section>

JavaScript

"use strict";

/**
 * Use input JSON object to describe a form.
 *
 * JSON Schema sample:
 * ```json
 * {
 *      "fieldKey":{
 *         "docs":"Field description for external use",
 *         "type":"Text",
 *         "presentation" : {
 *             "label":"Text to use as label",
 *             "order": 4
 *         },
 *         "validation" : {
 *             "minLen":1,
 *             "maxLen":50
 *         }
 *     },
 *     // ...
 * }
 * ```
 *
 * Relevant help I used:
 * - http://angular-formly.com/
 * - https://hacks.mozilla.org/2015/08/es6-in-depth-modules/
 * - http://www.michaelbromley.co.uk/blog/350/exploring-es6-classes-in-angularjs-1-x
 * - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
 * - http://stackoverflow.com/questions/32113604/why-is-the-new-es6-find-method-not-recognised-in-jsbin
 **/

console.clear();

/**
 * Let's assume the following input is coming from a separate HTTP request
 **/
var inputs = {
        "email":{
            "docs":"Email address of the user. Used for authentication. Must be unique.",
            "type":"Text",
            "presentation" : {
                "label":"Email",
                "type":"email",
                "order":1
            },
            "validation" : {
                "required" : true
            }
        },
        "password":{
            "docs":"Encoded user password. Used for authentication. Write unencoded, saves encoded.",
            "type":"Text",
            "presentation" : {
                "label":"Password",
                "type": "password",
                "order":2
            }
        },
        "fullName" : {
            "docs" : "Human's full name. For client display and human readability",
            "type" : "Text",
            "presentation" : {
                "label" : "Full Name",
                "visible":"none",
                "order":9
            },
            "validation" : {
                "required" : true
            }
        },
     ...