Merge pull request #23 from optiflows/develop

Input error message

Author: Anthropic

bower.json

@@ -24,9 +24,10 @@
   "dependencies": {
     "angular-schema-form": ">=0.8.13",
     "angular": "1.5.5",
-    "angular-material": "1.0.7",
-    "angular-animate": "1.4",
-    "angular-sanitize": "1.4"
+    "angular-material": "1.0.9",
+    "angular-animate": "1.5.5",
+    "angular-sanitize": "1.5.5",
+    "angular-messages": "1.5.5"
   },
   "devDependencies": {
     "angular-ui-ace": "~0.2.3",

examples/material-example.html

@@ -165,6 +165,7 @@ <h3>Schema</h3>
 <script src="../bower_components/angular-aria/angular-aria.js"></script>
 <script src="../bower_components/angular-animate/angular-animate.js"></script>
 <script src="../bower_components/angular-material/angular-material.js"></script>
+<script src="../bower_components/angular-messages/angular-messages.js"></script>
 <script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
 <!-- <script type="text/javascript" src="../bower_components/angular-ui-sortable/sortable.js"></script>
 -->
@@ -175,7 +176,7 @@ <h3>Schema</h3>
 
 <script type="text/javascript">
 // @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
-var app = angular.module('test', ['schemaForm', 'ngMaterial', 'ui.ace'])
+var app = angular.module('test', ['schemaForm', 'ngMaterial', 'ui.ace','ngMessages'])
 
 app.config(function($mdThemingProvider, $mdDateLocaleProvider) {
   $mdThemingProvider.setDefaultTheme('default');

material-decorator.js

@@ -5,6 +5,7 @@
                sf-changed="form"
                ng-disabled="form.readonly"
                schema-validate="form"
+               sf-material-class="md-checked"
                class="{{::form.fieldHtmlClass}}"
                name="{{::form.key|sfCamelKey}}"
                aria-label="{{::form.title}}">

material-decorator.min.js

@@ -1,6 +1,6 @@
 <md-input-container class="schema-form-{{::form.type}} {{::form.htmlClass}}"
-                    ng-class="{'md-input-has-value': model['{{form.key.join('\'][\'')}}'], 'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
-                    sf-messages sf-layout>
+                    ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
+                    sf-messages sf-layout sf-material-class="md-input-has-value">
   <label  ng-show="showTitle()" for="{{::form.key|sfCamelKey}}">{{::form.title}}</label>
   <input sf-field-model
          ng-show="::form.key"

src/checkbox.html

@@ -0,0 +1,24 @@
+angular.module('schemaForm').directive('sfMaterialClass', function($compile, $timeout) {
+    return {
+        restrict : 'A',
+        scope    : false,
+        link     : function(scope, element, attrs, ngModel) {
+            function reduceHelper(obj, i) {return obj[i]}
+
+            var modelValue;
+            try {
+                modelValue = scope.form.key.reduce(reduceHelper, scope.model);
+            } catch (e) {
+                modelValue = undefined;
+            }
+
+            // Element class is not set in DOM if executed immediately.
+            // I don't understand exactly why but it's probably related to other directive job.
+            $timeout(function() {
+                if (modelValue !== null && typeof modelValue !== 'undefined' && modelValue !== false) {
+                    element.addClass(attrs.sfMaterialClass);
+                }
+            }, 0);
+        }
+    };
+});

src/default.html

@@ -73,7 +73,8 @@
     };
 
     function sfMessagesNodeHandler() {
-      var html = '<div ng-if="ngModel.$invalid" ng-messages="ngModel.$error"><div sf-message ng-message></div></div>';
+        var html = '<div ng-if="ngModel.$invalid" ng-messages="{dummy: true}" class="ng-active">' +
+          '<div ng-message="dummy" class="md-input-message-animation" sf-message="form.description"></div></div>';
       var div = document.createElement('div');
       div.innerHTML = html;
       return div.firstChild;
@@ -82,7 +83,7 @@
     function sfMessagesBuilder(args) {
       var messagesDiv = args.fieldFrag.querySelector('[sf-messages]');
       if (messagesDiv && sfMessagesNode) {
-        var child = sfMessagesNode.cloneNode();
+        var child = sfMessagesNode.cloneNode(true);
         messagesDiv.appendChild(child);
       }
     };