Changed from using ng-required to tv4js

This also means required, minItems and maxItems validates on arrays.
Aslo added an event 'schemaFormValidate' that forces validation of all
fields. Useful from a submit button for instance.

Author: davidlgj

examples/data/array.json

@@ -2,9 +2,11 @@
   "schema": {
     "type": "object",
     "title": "Comment",
+    "required": ["comments"],
     "properties": {
       "comments": {
         "type": "array",
+        "maxItems": 2,
         "items": {
           "type": "object",
           "properties": {
@@ -33,7 +35,7 @@
   "form": [
     {
       "type": "help",
-      "helpvalue": "<h4>Array Example</h4><p>Try adding a couple of forms, reorder by drag'n'drop.</p>" 
+      "helpvalue": "<h4>Array Example</h4><p>Try adding a couple of forms, reorder by drag'n'drop.</p>"
     },
     {
       "key": "comments",

src/directives/array.js

@@ -1,8 +1,8 @@
 /**
  * Directive that handles the model arrays
  */
-angular.module('schemaForm').directive('sfArray', ['sfSelect','schemaForm',
-function(sfSelect, schemaForm) {
+angular.module('schemaForm').directive('sfArray', ['sfSelect','schemaForm','sfValidator',
+function(sfSelect, schemaForm, sfValidator) {
 
   var setIndex = function(index) {
     return function(form) {
@@ -15,7 +15,8 @@ function(sfSelect, schemaForm) {
   return {
     restrict: 'A',
     scope: true,
-    link: function(scope, element, attrs) {
+    require: '?ngModel',
+    link: function(scope, element, attrs, ngModel) {
       var formDefCache = {};
 
       // Watch for the form definition and then rewrite it.
@@ -74,10 +75,10 @@ function(sfSelect, schemaForm) {
           });
 
           // If there are no defaults nothing is added so we need to initialize
-          // the array. null for basic values, {} or [] for the others.
+          // the array. undefined for basic values, {} or [] for the others.
           if (len === list.length) {
             var type = sfSelect('schema.items.type',form);
-            var dflt = null;
+            var dflt;
             if (type === 'object') {
               dflt = {};
             } else if (type === 'array') {
@@ -107,9 +108,6 @@ function(sfSelect, schemaForm) {
         if (form.titleMap && form.titleMap.length > 0) {
           scope.titleMapValues = [];
 
-
-
-
           // We watch the model for changes and the titleMapValues to reflect
           // the modelArray
           var updateTitleMapValues = function(arr) {
@@ -146,6 +144,56 @@ function(sfSelect, schemaForm) {
           });
         }
 
+
+        // If there is a ngModel present we need to validate when asked.
+        if (ngModel) {
+          var error;
+
+          // Listen to an event so we can validate the input on request
+          scope.$on('schemaFormValidate',function(payload) {
+            // The actual content of the array is validated by each field
+            // so we settle for checking validations specific to arrays
+
+            // Since we prefill with empty arrays we can get the funny situation
+            // where the array is required but empty in the gui but still validates.
+            // Thats why we check the length.
+            var result = sfValidator.validate(
+              form,
+              scope.modelArray.length > 0 ? scope.modelArray : undefined
+            );
+            console.log(result.error)
+            if (result.valid === false &&
+                result.error &&
+                (result.error.dataPath === '' ||
+                result.error.dataPath === '/'+form.key[form.key.length - 1])) {
+            console.log('setting invlid')
+              // Set viewValue to trigger $dirty on field. If someone knows a
+              // a better way to do it please tell.
+              ngModel.$setViewValue(scope.modelArray);
+              error = result.error;
+              ngModel.$setValidity('schema', false);
+
+            } else {
+              ngModel.$setValidity('schema', true);
+            }
+
+          });
+
+
+          scope.hasSuccess = function(){
+            return ngModel.$valid && !ngModel.$pristine;
+          };
+
+          scope.hasError = function(){
+            return ngModel.$invalid;
+          };
+
+          scope.schemaError = function() {
+            return error;
+          };
+
+        }
+
         once();
       });
     }

src/directives/decorators/bootstrap/array.html

@@ -1,4 +1,4 @@
-<div sf-array="form">
+<div sf-array="form" ng-model="$$value$$">
   <h3 ng-show="form.title && form.notitle !== true">{{ form.title }}</h3>
   <ul class="list-group" ng-model="modelArray" ui-sortable>
     <li class="list-group-item" ng-repeat="item in modelArray track by $index">
@@ -18,4 +18,7 @@ <h3 ng-show="form.title && form.notitle !== true">{{ form.title }}</h3>
       {{ form.add || 'Add'}}
     </button>
   </div>
+  <div class="help-block"
+       ng-show="(hasError() && errorMessage(schemaError())) || form.description"
+       ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
 </div>

src/directives/decorators/bootstrap/checkbox.html

@@ -3,8 +3,7 @@
     <input type="checkbox"
            sf-changed="form"
            ng-model="$$value$$"
-           schema-validate="form.schema"
-           ng-required="form.required">
+           schema-validate="form"
     <span ng-bind-html="form.title"></span>
   </label>
 

src/directives/decorators/bootstrap/datepicker/datepicker.html

@@ -5,8 +5,7 @@
          style="background-color: white"
          type="date"
          class="form-control"
-         ng-required="form.required"
-         schema-validate="form.schema"
+         schema-validate="form"
          ng-model="$$value$$"
          pick-a-date
          min-date="form.minDate"

src/directives/decorators/bootstrap/default.html

@@ -6,9 +6,8 @@
          sf-changed="form"
          placeholder="{{form.placeholder}}"
          class="form-control"
-         ng-required="form.required"
          ng-model="$$value$$"
-         schema-validate="form.schema">
+         schema-validate="form">
   <span ng-if="form.feedback !== false"
         class="form-control-feedback"
         ng-class="evalInScope(form.feedback) || {'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }"></span>

src/directives/decorators/bootstrap/select.html

@@ -5,8 +5,7 @@
   <select ng-model="$$value$$"
           sf-changed="form"
           class="form-control"
-          schema-validate="form.schema"
-          ng-required="form.required"
+          schema-validate="form"
           ng-options="item.value as item.name for item in form.titleMap">
   </select>
   <div class="help-block"

src/directives/decorators/bootstrap/textarea.html

@@ -2,9 +2,8 @@
   <label ng-show="showTitle()">{{form.title}}</label>
   <textarea class="form-control"
             sf-changed="form"
-            ng-required="form.required"
             ng-model="$$value$$"
-            schema-validate="form.schema"></textarea>
+            schema-validate="form"></textarea>
   <!-- disabled until we unbreak the css
     <span ng-if="form.feedback !== false"
         class="form-control-feedback"

src/directives/schema-validate.js

@@ -1,5 +1,5 @@
 /* global tv4 */
-angular.module('schemaForm').directive('schemaValidate',function(){
+angular.module('schemaForm').directive('schemaValidate',['sfValidator',function(sfValidator){
   return {
     restrict: 'A',
     scope: false,
@@ -10,50 +10,50 @@ angular.module('schemaForm').directive('schemaValidate',function(){
       scope.ngModel = ngModel;
 
       var error = null;
-      var schema  = scope.$eval(attrs.schemaValidate);
-
-      ngModel.$parsers.unshift(function(viewValue) {
-        if (!schema) {
-          schema = scope.$eval(attrs.schemaValidate);
+      var form   = scope.$eval(attrs.schemaValidate);
+      // Validate against the schema.
+      var validate = function(viewValue) {
+        if (!form) {
+          form = scope.$eval(attrs.schemaValidate);
         }
 
-        //Still might be undefined, especially if form has no schema...
-        if (!schema) {
+        //Still might be undefined
+        if (!form) {
           return viewValue;
         }
 
-        //required is handled by ng-required
-        if (angular.isUndefined(viewValue)) {
+        // Is required is handled by ng-required?
+        if (angular.isDefined(attrs.ngRequired) && angular.isUndefined(viewValue)) {
           return undefined;
         }
 
-        //Type cast and validate against schema.
-        //Basic types of json schema sans array and object
-        var value = viewValue;
-        if (schema.type === 'integer') {
-          value = parseInt(value,10);
-        } else if (schema.type === 'number') {
-          value = parseFloat(value,10);
-        } else if (schema.type === 'boolean' && typeof viewValue === 'string') {
-          if (viewValue === 'true') {
-            value = true;
-          } else if (viewValue === 'false') {
-            value = false;
-          }
+        // An empty field gives us the an empty string, which JSON schema
+        // happily accepts as a proper defined string, but an empty field
+        // for the user should trigger "required". So we set it to undefined.
+        if (viewValue === "") {
+          viewValue = undefined;
         }
 
-        var result = tv4.validateResult(value,schema);
+        var result = sfValidator.validate(form, viewValue);
+
         if (result.valid) {
           // it is valid
           ngModel.$setValidity('schema', true);
-          error = null;
           return viewValue;
         } else {
           // it is invalid, return undefined (no model update)
           ngModel.$setValidity('schema', false);
           error = result.error;
           return undefined;
         }
+      };
+
+      // Unshift onto parsers of the ng-model.
+      ngModel.$parsers.unshift(validate);
+
+      // Listen to an event so we can validate the input on request
+      scope.$on('schemaFormValidate',function() {
+        ngModel.$commitViewValue(true);
       });
 
       //This works since we now we're inside a decorator and that this is the decorators scope.
@@ -72,4 +72,4 @@ angular.module('schemaForm').directive('schemaValidate',function(){
 
     }
   };
-});
+}]);

src/services/validator.js

@@ -0,0 +1,54 @@
+/*  Common code for validating a value against its form and schema definition */
+/* global tv4 */
+angular.module('schemaForm').factory('sfValidator',[function(){
+
+  var validator = {};
+
+  /**
+   * Validate a value against its form definition and schema.
+   * The value should either be of proper type or a string, some type
+   * coercion is applied.
+   *
+   * @param {Object} form A merged form definition, i.e. one with a schema.
+   * @param {Any} value the value to validate.
+   * @return a tv4js result object.
+   */
+  validator.validate = function(form, value) {
+
+    var schema = form.schema;
+
+    //Type cast and validate against schema.
+    //Basic types of json schema sans array and object
+    if (schema.type === 'integer') {
+      value = parseInt(value,10);
+    } else if (schema.type === 'number') {
+      value = parseFloat(value,10);
+    } else if (schema.type === 'boolean' && typeof value === 'string') {
+      if (value === 'true') {
+        value = true;
+      } else if (value === 'false') {
+        value = false;
+      }
+    }
+
+    // Version 4 of JSON Schema has the required property not on the
+    // property itself but on the wrapping object. Since we like to test
+    // only this property we wrap it in a fake object.
+    var wrap = { type: "object", "properties": { }};
+    var propName = form.key[form.key.length - 1];
+    wrap.properties[propName] = schema;
+
+    if (form.required) {
+      wrap.required = [propName];
+    }
+    var valueWrap = {};
+    if (angular.isDefined(value)) {
+      valueWrap[propName] = value;
+    }
+
+    return tv4.validateResult(valueWrap, wrap);
+
+  };
+
+  return validator;
+}]);