json-schema-form · davidlgj · May 29, 2015 · May 24, 2015 · May 24, 2015 · May 24, 2015
diff --git a/.jscsrc b/.jscsrc
@@ -0,0 +1,15 @@
+{
+  "preset": "google",
+  "disallowSpacesInsideObjectBrackets": null,
+  "requireSpacesInsideObjectBrackets": {
+    "allExcept": [ "[", "]", "{", "}" ]
+  },
+  "disallowSpacesInsideArrayBrackets": null,
+  "requireSpacesInsideArrayBrackets": {
+    "allExcept": [ "[", "]", "{", "}" ]
+  },
+  "disallowKeywordsOnNewLine": [ ],
+  "disallowMultipleVarDecl": null,
+  "maximumLineLength": 120,
+  "requireSemicolons": true
+}
diff --git a/examples/data/titlemaps.json b/examples/data/titlemaps.json
@@ -61,9 +61,12 @@
       "key": "noenum",
       "type": "select",
       "titleMap": [
-        { "value":"a", "name": "A" },
-        { "value":"b", "name":"B" },
-        { "value":"c", "name":"C" }
+        { "value":"a1", "name": "A1", "group": "A" },
+        { "value":"a2", "name":"A2", "group": "A" },
+        { "value":"a3", "name":"A3", "group": "A" },
+        { "value":"b1", "name": "B1", "group": "B" },
+        { "value":"b2", "name":"B2", "group": "B" },
+        { "value":"b3", "name":"B3", "group": "B" }
       ]
     },
     "array",

diff --git a/examples/material-example.html b/examples/material-example.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>Angular Material Schema Form example</title>
+  <title>Material Design Schema Form example</title>
   <link rel="stylesheet" href="../bower_components/angular-material/angular-material.css">
   <style type="text/css">
   .spinner {
@@ -38,14 +38,6 @@
     min-height: 1400px;
   }
 
-  body {
-    padding: 15px;
-  }
-
-  .editors {
-    padding: 0 15px;
-  }
-
   .alert .form-group {
     margin-bottom: 0px;
   }
@@ -144,10 +136,12 @@
   </div><!-- /.container-fluid -->
 </nav>
 
+
 <div>
   <h1><a href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></a> Schema Form Example</h1>
-  <div layout="row">
-    <div flex="33">
+  <h2>Material Design</h2>
+  <div layout="row" layout-margin>
+    <div layout="column" flex="45">
       <h3>The Generated Form</h3>
 
       <form name="ngform"  sf-model="modelData" sf-form="form" sf-schema="schema" ng-submit="submitForm(ngform,modelData)"></form>
@@ -166,13 +160,12 @@ <h3>The Generated Form</h3>
       <h3>Model</h3>
       <pre ng-cloak>{{pretty()}}</pre>
     </div>
-    <div class="editors" flex="66">
+    <div layout="column" flex>
       <h3>Select Example</h3>
       <div class="form-group">
-        <select class="form-control" id="selectTest"
-                ng-model="selectedTest"
-                ng-options="obj.name for obj in tests">
-        </select>
+        <md-select id="selectTest" ng-model="selectedTest" placeholder="{{form.placeholder}}">
+          <md-option ng-value="obj" ng-repeat="obj in tests">{{ obj.name }}</md-option>
+        </md-select>
         <span class="btw">
           By the way, there is also an example of
           <a href="custom-validators.html">custom (async) validators</a> example.
@@ -250,7 +243,7 @@ <h3>Schema</h3>
 // To test the tinymce addon, uncomment the files above and inject 'tx-tinymce' below.
 /*global alert*/
 //var app = angular.module('test', ['schemaForm', 'ui.ace', 'ngClipboard', 'ui.bootstrap.tooltip']);
-var app = angular.module('test', ['schemaForm', 'ngMaterial', 'ui.ace']);
+var app = angular.module('test', ['schemaForm', 'ngMaterial', 'ui.ace'])
 
 /*app.config(['ngClipProvider', function(ngClipProvider) {
     ngClipProvider.setPath('//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.swf');
@@ -267,11 +260,11 @@ <h3>Schema</h3>
   $scope.tests = [
     { name: "Simple", data: 'data/simple.json' },
     { name: "Basic JSON Schema Type", data: 'data/types.json' },
+    { name: "TitleMap Examples", data: 'data/titlemaps.json' },
     { name: "Bootstrap Grid", data: 'data/grid.json' },
     { name: "Complex Key Support", data: 'data/complex-keys.json' },
     { name: "Array", data: 'data/array.json' },
     { name: "Tab Array", data: 'data/tabarray.json' },
-    { name: "TitleMap Examples", data: 'data/titlemaps.json' },
     { name: "Kitchen Sink", data: 'data/sink.json' },
     { name: "Hack: Conditional required", data: 'data/conditional-required.json' },
   ];

diff --git a/material-decorator.js b/material-decorator.js
diff --git a/material-decorator.min.js b/material-decorator.min.js
diff --git a/src/checkbox.html b/src/checkbox.html
@@ -17,17 +17,16 @@
 <!--
 <div class="checkbox schema-form-checkbox {{form.htmlClass}}"
      ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
-  <label>
-    <input type="checkbox"
-           sf-changed="form"
-           ng-disabled="form.readonly"
-           ng-model="$$value$$"
-           ng-model-options="form.ngModelOptions"
-           schema-validate="form"
-           class="{{form.fieldHtmlClass}}"
-           name="{{form.key.slice(-1)[0]}}">
+    <md-checkbox ng-model="$$value$$"
+                 ng-model-options="form.ngModelOptions"
+                 sf-changed="form"
+                 ng-disabled="form.readonly"
+                 schema-validate="form"
+                 class="{{form.fieldHtmlClass}}"
+                 name="{{form.key.slice(-1)[0]}}"
+                 aria-label="{{form.title || form.key.slice(-1)[0]}}">
     <span ng-bind-html="form.title"></span>
-  </label>
-  <div class="help-block" sf-message="form.description"></div>
+  </md-checkbox>
+  <div class="help-block md-caption" sf-message="form.description"></div>
 </div>
 -->
diff --git a/src/checkboxes.html b/src/checkboxes.html
@@ -3,17 +3,20 @@
      ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
   <label class="control-label" ng-show="showTitle()">{{form.title}}</label>
   <div class="checkbox" ng-repeat="val in titleMapValues track by $index" >
-    <label>
-      <input type="checkbox"
-             ng-disabled="form.readonly"
-             sf-changed="form"
-             class="{{form.fieldHtmlClass}}"
-             ng-model="titleMapValues[$index]"
-             schema-vaidate="form"
-             name="{{form.key.slice(-1)[0]}}">
+    <md-checkbox ng-model="titleMapValues[$index]"
+                sf-changed="form"
+                ng-disabled="form.readonly"
+                schema-validate="form"
+                name="{{form.key.slice(-1)[0]}}"
+                aria-label="{{form.title || form.key.slice(-1)[0]}}">
       <span ng-bind-html="form.titleMap[$index].name"></span>
-    </label>
-
+    </md-checkbox>
+  </div>
+  <div ng-messages="ngModel.$error">
+    <!--
+       This is a bit of a hack. sf-message does the work, but ng-messages and ng-message
+       is needed for the styling
+    -->
+    <div sf-message ng-message></div>
   </div>
-  <div class="help-block" sf-message="form.description"></div>
 </div>
diff --git a/src/fieldset-trcl.html b/src/fieldset-trcl.html
@@ -1,5 +1,4 @@
-<fieldset ng-disabled="form.readonly" class="schema-form-fieldset {{form.htmlClass}}">
+<fieldset ng-disabled="form.readonly" class="standard {{form.htmlClass}}" flex>
   <legend ng-show="form.title">{{ form.title }}</legend>
-  <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
   <div ng-transclude></div>
 </fieldset>
diff --git a/src/fieldset.html b/src/fieldset.html
@@ -1,5 +1,4 @@
-<fieldset ng-disabled="form.readonly" class="schema-form-fieldset {{form.htmlClass}}">
+<fieldset ng-disabled="form.readonly" class="standard {{form.htmlClass}}" flex>
   <legend ng-show="form.title">{{ form.title }}</legend>
-  <div class="help-block" ng-show="form.description" ng-bind-html="form.description"></div>
   <sf-decorator ng-repeat="item in form.items" form="item"></sf-decorator>
 </fieldset>
diff --git a/src/material-decorator.js b/src/material-decorator.js
@@ -1,33 +1,40 @@
-angular.module('schemaForm').config(['schemaFormDecoratorsProvider', function(decoratorsProvider) {
-  var base = 'decorators/material/';
+angular.module('schemaForm')
+  .config([ 'schemaFormDecoratorsProvider', function(decoratorsProvider) {
+    var base = 'decorators/material/';
 
-  decoratorsProvider.defineDecorator('materialDecorator', {
-    textarea: {template: base + 'textarea.html'},
-    checkbox: {template: base + 'checkbox.html'},
-    'default': {template: base + 'default.html'},
-    submit: {template: base + 'submit.html'}
-  });
+    decoratorsProvider.defineDecorator('materialDecorator', {
+      textarea: { template: base + 'textarea.html' },
+      fieldset: { template: base + 'fieldset.html' },
+      'default': { template: base + 'default.html' },
+      select: { template: base + 'select.html' },
+      checkbox: { template: base + 'checkbox.html' },
+      checkboxes: { template: base + 'checkboxes.html' },
+      radios: { template: base + 'radios.html' },
+      'radios-inline': { template: base + 'radios-inline.html' },
+      radiobuttons: { template: base + 'radio-buttons.html' },
+      submit: { template: base + 'submit.html' }
+    });
 
-/*  decoratorsProvider.createDecorator('materialDecorator', {
-    textarea: base + 'textarea.html',
-    fieldset: base + 'fieldset.html',
-    array: base + 'array.html',
-    tabarray: base + 'tabarray.html',
-    tabs: base + 'tabs.html',
-    section: base + 'section.html',
-    conditional: base + 'section.html',
-    actions: base + 'actions.html',
-    select: base + 'select.html',
-    checkbox: base + 'checkbox.html',
-    checkboxes: base + 'checkboxes.html',
-    number: base + 'default.html',
-    password: base + 'default.html',
-    submit: base + 'submit.html',
-    button: base + 'submit.html',
-    radios: base + 'radios.html',
-    'radios-inline': base + 'radios-inline.html',
-    radiobuttons: base + 'radio-buttons.html',
-    help: base + 'help.html',
-    'default': base + 'default.html'
-  });*/
-}]);
+    /*  decoratorsProvider.createDecorator('materialDecorator', {
+        textarea: base + 'textarea.html',
+        fieldset: base + 'fieldset.html',
+        array: base + 'array.html',
+        tabarray: base + 'tabarray.html',
+        tabs: base + 'tabs.html',
+        section: base + 'section.html',
+        conditional: base + 'section.html',
+        actions: base + 'actions.html',
+        select: base + 'select.html',
+        checkbox: base + 'checkbox.html',
+        checkboxes: base + 'checkboxes.html',
+        number: base + 'default.html',
+        password: base + 'default.html',
+        submit: base + 'submit.html',
+        button: base + 'submit.html',
+        radios: base + 'radios.html',
+        'radios-inline': base + 'radios-inline.html',
+        radiobuttons: base + 'radio-buttons.html',
+        help: base + 'help.html',
+        'default': base + 'default.html'
+      });*/
+  }]);
diff --git a/src/radios-inline.html b/src/radios-inline.html
@@ -1,18 +1,18 @@
 <div class="form-group schema-form-radios-inline {{form.htmlClass}}"
      ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
   <label class="control-label" ng-show="showTitle()">{{form.title}}</label>
-  <div>
-      <label class="radio-inline" ng-repeat="item in form.titleMap" >
-      <input type="radio"
-             class="{{form.fieldHtmlClass}}"
-             sf-changed="form"
-             ng-disabled="form.readonly"
-             ng-model="$$value$$"
-             schema-validate="form"
-             ng-value="item.value"
-             name="{{form.key.join('.')}}">
+  <md-radio-group layout="row"
+                  ng-model="$$value$$"
+                  ng-model-options="form.ngModelOptions"
+                  class="{{form.fieldHtmlClass}}"
+                  ng-class="{ active: item.value === $$value$$ }"
+                  sf-changed="form"
+                  schema-validate="form"
+                  ng-disabled="form.readonly"
+                  name="{{form.key.join('.')}}">
+    <md-radio-button ng-repeat="item in form.titleMap" ng-value="item.value">
       <span ng-bind-html="item.name"></span>
-    </label>
-  </div>
-  <div class="help-block" sf-message="form.description"></div>
+    </md-radio-button>
+  </md-radio-group>
+  <div class="help-block md-caption" sf-message="form.description"></div>
 </div>
diff --git a/src/radios.html b/src/radios.html
@@ -1,18 +1,17 @@
-<div class="form-group schema-form-radios {{form.htmlClass}}" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
+<div class="form-group schema-form-radios {{form.htmlClass}}"
+     ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
   <label class="control-label" ng-show="showTitle()">{{form.title}}</label>
-  <div class="radio" ng-repeat="item in form.titleMap" >
-    <label>
-      <input type="radio"
-             class="{{form.fieldHtmlClass}}"
-             sf-changed="form"
-             ng-disabled="form.readonly"
-             ng-model="$$value$$"
-             ng-model-options="form.ngModelOptions"
-             schema-validate="form"
-             ng-value="item.value"
-             name="{{form.key.join('.')}}">
+  <md-radio-group ng-model="$$value$$"
+                  ng-model-options="form.ngModelOptions"
+                  class="{{form.fieldHtmlClass}}"
+                  ng-class="{ active: item.value === $$value$$ }"
+                  sf-changed="form"
+                  schema-validate="form"
+                  ng-disabled="form.readonly"
+                  name="{{form.key.join('.')}}">
+    <md-radio-button ng-repeat="item in form.titleMap" ng-value="item.value">
       <span ng-bind-html="item.name"></span>
-    </label>
-  </div>
-  <div class="help-block" sf-message="form.description"></div>
+    </md-radio-button>
+  </md-radio-group>
+  <div class="help-block md-caption" sf-message="form.description"></div>
 </div>
diff --git a/src/select.html b/src/select.html
@@ -1,16 +1,16 @@
 <div class="form-group {{form.htmlClass}} schema-form-select"
      ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}">
-  <label class="control-label" ng-show="showTitle()">
-    {{form.title}}
-  </label>
-  <select ng-model="$$value$$"
-          ng-model-options="form.ngModelOptions"
-          ng-disabled="form.readonly"
-          sf-changed="form"
-          class="form-control {{form.fieldHtmlClass}}"
-          schema-validate="form"
-          ng-options="item.value as item.name group by item.group for item in form.titleMap"
-          name="{{form.key.slice(-1)[0]}}">
-  </select>
-  <div class="help-block" sf-message="form.description"></div>
+  <md-select ng-model="$$value$$">
+    <md-select-label ng-show="showTitle()">{{form.title}}</md-select-label>
+    <md-optgroup ng-repeat-start="(key, opt) in form.titleMap | orderBy:'group' as optGroups"
+                 ng-if="opt.group && opt.group != optGroups[key-1].group"
+                 label="{{opt.group}}">
+      <md-option ng-repeat="(key, filtered) in form.titleMap | filter: {group: opt.group} | orderBy:'name' as opts"
+                 ng-value="filtered.value">{{filtered.name}}</md-option>
+    </md-optgroup>
+    <md-option ng-repeat-end
+               ng-if="!opt.group"
+               ng-value="opt.value">{{opt.name}}</md-option>
+  </md-select>
+  <p class="help-block md-caption" sf-message="form.description"></p>
 </div>
diff --git a/src/textarea.html b/src/textarea.html
@@ -1,14 +1,12 @@
 <md-input-container class="{{form.htmlClass}} schema-form-textarea">
   <label ng-show="showTitle()" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
-
   <textarea ng-class="form.fieldHtmlClass"
             id="{{form.key.slice(-1)[0]}}"
             sf-changed="form"
             ng-disabled="form.readonly"
             ng-model="$$value$$"
             schema-validate="form"
             name="{{form.key.slice(-1)[0]}}"></textarea>
-
       <div ng-messages="ngModel.$error">
         <!--
            This is a bit of a hack. sf-message does the work, but ng-messages and ng-message