Merge branch 'release/0.8.1'

.jscs.json

@@ -1,4 +1,5 @@
 {
   "preset": "google",
-  "maximumLineLength": 100
+  "maximumLineLength": 100,
+  "disallowMultipleLineBreaks": false
 }

.jshintrc

@@ -2,14 +2,15 @@
   "undef": true,
   "unused": true,
   "browser": true,
-  "globals": { 
+  "globals": {
+    "ObjectPath": false,
     "console":false,
     "jQuery": false,
     "$":false,
     "assertEquals": false,
     "jstestdriver": false,
     "assertTrue": false,
-    "assertFalse": false, 
+    "assertFalse": false,
     "describe": false,
     "it":false,
     "expect": false,
@@ -24,4 +25,4 @@
     "Jed": false,
     "tws": false
   }
-}
+}

CHANGELOG

@@ -1,3 +1,16 @@
+v0.8.1
+------
+ * Fixed order of error messages, thanks @davidlgj
+ * Added `modelValue` to  variables available in a condition, thanks @dben
+ * UMD wrapping, thanks @dwikle
+ * disableErrorState, disableSuccessState options, thanks @domasx2
+ * Awesome gist integration to example page, thanks @dervisevic
+ * Global option to disable tv4 validation, thanks @maff
+ * Option: labelHtmlClass, thanks @AlexAlbala
+ * Doc fixes and updates, thanks @Minisai, @jdcaballerov, @cjroth, @dervisevic
+ * Bugfixes, thanks @engelfrost, @mqamhieh, @carchrae
+
+
 v0.8.0
 Loads of stuff happened this release, so we're bumping version to 0.8.0.
 Note as well that there is a small change to `tabsarray` type regarding its title, the title is now
@@ -16,7 +29,7 @@ See the docs on `tabarray` for an more info.
    directive for add-on to use. thanks @davidlgj
  * interpolation instead of eval'ing in tabarray title, thanks @coridyn
  * Lots of bugfixes, most notable checkboxes validation now works, thanks @davidlgj, @coridyn,
-   @ulion, @adamcbuckley 
+   @ulion, @adamcbuckley
 
 v0.7.13
 -------

README.md

@@ -1,4 +1,4 @@
-Angular Schema Form [![alt text][1.1]][1]
+Angular Schema Form
 ===================
 [![Build Status](https://travis-ci.org/Textalk/angular-schema-form.svg?branch=master)](https://travis-ci.org/Textalk/angular-schema-form)
 [![Coverage Status](https://coveralls.io/repos/Textalk/angular-schema-form/badge.png?branch=master)](https://coveralls.io/r/Textalk/angular-schema-form?branch=development)
@@ -8,14 +8,15 @@ Angular Schema Form [![alt text][1.1]][1]
 
 Generate forms from JSON schemas using AngularJS!
 
-Web Page
+Web Page / Twitter
 --------
-[schemaform.io](http://schemaform.io)
+[schemaform.io](http://schemaform.io) / [@SchemaFormIO](http://twitter.com/SchemaFormIO)
 
 Demo Time!
 ----------
-[Try out the example page](http://schemaform.io/examples/bootstrap-example.html).
-Try editing the schema or form definition and see what comes out!
+[Try out the example page](http://schemaform.io/examples/bootstrap-example.html). Try editing the schema or form definition and see what comes out!
+
+Now you can save your code and share it!
 
 What is it?
 ----------
@@ -200,8 +201,3 @@ $ bower install
 $ sudo npm install -g karma-cli
 $ karma start karma.conf.js
 ```
-
-<!-- Please don't remove this: Grab your social icons from https://github.com/carlsednaoui/gitsocial -->
-[1.1]: http://i.imgur.com/tXSoThF.png (twitter icon with padding)
-[1]: http://www.twitter.com/ngSchemaForm
-[1.2]: http://i.imgur.com/wWzX9uB.png (twitter icon without padding)

bower.json

@@ -4,7 +4,7 @@
     "dist/schema-form.js",
     "dist/bootstrap-decorator.js"
   ],
-  "version": "0.8.0",
+  "version": "0.8.1",
   "authors": [
     "Textalk",
     "David Jensen <david.lgj@gmail.com>",

dist/schema-form.js

@@ -1,3 +1,12 @@
+(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(['angular', 'ObjectPath', 'tv4'], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory(require('angular'), require('ObjectPath'), require('tv4'));
+  } else {
+    root.schemaForm = factory(root.angular, root.ObjectPath, root.tv4);
+  }
+}(this, function(angular, ObjectPath, tv4) {
 // Deps is sort of a problem for us, maybe in the future we will ask the user to depend
 // on modules for add-ons
 
@@ -20,7 +29,7 @@ try {
   deps.push('angularSpectrumColorpicker');
 } catch (e) {}
 
-angular.module('schemaForm', deps);
+var schemaForm = angular.module('schemaForm', deps);
 
 angular.module('schemaForm').provider('sfPath',
 [function() {
@@ -159,8 +168,8 @@ angular.module('schemaForm').provider('schemaFormDecorators',
 
   var createDirective = function(name) {
     $compileProvider.directive(name,
-      ['$parse', '$compile', '$http', '$templateCache', '$interpolate', '$q', 'sfErrorMessage',
-      function($parse,  $compile,  $http,  $templateCache, $interpolate, $q, sfErrorMessage) {
+      ['$parse', '$compile', '$http', '$templateCache', '$interpolate', '$q', 'sfErrorMessage', 'sfPath',
+      function($parse,  $compile,  $http,  $templateCache, $interpolate, $q, sfErrorMessage, sfPath) {
 
         return {
           restrict: 'AE',
@@ -287,6 +296,7 @@ angular.module('schemaForm').provider('schemaFormDecorators',
               return sfErrorMessage.interpolate(
                 (schemaError && schemaError.code + '') || 'default',
                 (scope.ngModel && scope.ngModel.$modelValue) || '',
+                (scope.ngModel && scope.ngModel.$viewValue) || '',
                 scope.form,
                 scope.options && scope.options.validationMessage
               );
@@ -331,18 +341,23 @@ angular.module('schemaForm').provider('schemaFormDecorators',
                   // Do we have a condition? Then we slap on an ng-if on all children,
                   // but be nice to existing ng-if.
                   if (form.condition) {
+
+                    var evalExpr = 'evalExpr(form.condition,{ model: model, "arrayIndex": arrayIndex})';
+                    if (form.key) {
+                      evalExpr = 'evalExpr(form.condition,{ model: model, "arrayIndex": arrayIndex, "modelValue": model' + sfPath.stringify(form.key) + '})';
+                    }
+
                     angular.forEach(element.children(), function(child) {
                       var ngIf = child.getAttribute('ng-if');
                       child.setAttribute(
                         'ng-if',
                         ngIf ?
                         '(' + ngIf +
-                        ') || (evalExpr(form.condition,{ model: model, "arrayIndex": arrayIndex }))'
-                        : 'evalExpr(form.condition,{ model: model, "arrayIndex": arrayIndex })'
+                        ') || (' + evalExpr +')'
+                        : evalExpr
                       );
                     });
                   }
-
                   $compile(element.contents())(scope);
                 });
 
@@ -372,15 +387,16 @@ angular.module('schemaForm').provider('schemaFormDecorators',
                           if (!form.validationMessage) {
                             form.validationMessage = {};
                           }
-                          console.log('settings validationMessage', validationMessage)
                           form.validationMessage[error] = validationMessage;
                         }
 
                         scope.ngModel.$setValidity(error, validity === true);
 
-                        // Setting or removing a validity can change the field to believe its valid
-                        // but its not. So lets trigger its validation as well.
-                        scope.$broadcast('schemaFormValidate');
+                        if (validity === true) {
+                          // Setting or removing a validity can change the field to believe its valid
+                          // but its not. So lets trigger its validation as well.
+                          scope.$broadcast('schemaFormValidate');
+                        }
                       }
                   })
                 }
@@ -548,32 +564,32 @@ angular.module('schemaForm').provider('sfErrorMessage', function() {
   // TODO: Humanize these.
   var defaultMessages = {
     'default': 'Field does not validate',
-    0: 'Invalid type, expected {{schema.type}})',
+    0: 'Invalid type, expected {{schema.type}}',
     1: 'No enum match for: {{value}}',
     10: 'Data does not match any schemas from "anyOf"',
     11: 'Data does not match any schemas from "oneOf"',
     12: 'Data is valid against more than one schema from "oneOf"',
     13: 'Data matches schema from "not"',
     // Numeric errors
-    100: 'Value {{value}} is not a multiple of {{schema.multipleOf}}',
-    101: 'Value {{value}} is less than minimum {{schema.minimum}}',
-    102: 'Value {{value}} is equal to exclusive minimum {{schema.minimum}}',
-    103: 'Value {{value}} is greater than maximum {{schema.maximum}}',
-    104: 'Value {{value}} is equal to exclusive maximum {{schema.maximum}}',
-    105: 'Value {{value}} is not a valid number',
+    100: 'Value is not a multiple of {{schema.divisibleBy}}',
+    101: '{{viewValue}} is less than the allowed minimum of {{schema.minimum}}',
+    102: '{{viewValue}} is equal to the exclusive minimum {{schema.minimum}}',
+    103: '{{viewValue}} is greater than the allowed maximum of {{schema.maximum}}',
+    104: '{{viewValue}} is equal to the exclusive maximum {{schema.maximum}}',
+    105: 'Value is not a valid number',
     // String errors
-    200: 'String is too short ({{value.length}} chars), minimum {{schema.minimum}}',
-    201: 'String is too long ({{value.length}} chars), maximum {{schema.maximum}}',
+    200: 'String is too short ({{viewValue.length}} chars), minimum {{schema.minLength}}',
+    201: 'String is too long ({{viewValue.length}} chars), maximum {{schema.maxLength}}',
     202: 'String does not match pattern: {{schema.pattern}}',
     // Object errors
-    300: 'Too few properties defined, minimum {{schema.minimum}}',
-    301: 'Too many properties defined, maximum {{schema.maximum}}',
+    300: 'Too few properties defined, minimum {{schema.minProperties}}',
+    301: 'Too many properties defined, maximum {{schema.maxProperties}}',
     302: 'Required',
     303: 'Additional properties not allowed',
     304: 'Dependency failed - key must exist',
     // Array errors
-    400: 'Array is too short ({{value.length}}), minimum {{schema.minimum}}',
-    401: 'Array is too long ({{value.length}}), maximum {{schema.maximum}}',
+    400: 'Array is too short ({{value.length}}), minimum {{schema.maxItems}}',
+    401: 'Array is too long ({{value.length}}), maximum {{schema.minItems}}',
     402: 'Array items are not unique',
     403: 'Additional items not allowed',
     // Format errors
@@ -585,6 +601,15 @@ angular.module('schemaForm').provider('sfErrorMessage', function() {
     1000: 'Unknown property (not in schema)'
   };
 
+  // In some cases we get hit with an angular validation error
+  defaultMessages.number    = defaultMessages[105];
+  defaultMessages.required  = defaultMessages[302];
+  defaultMessages.min       = defaultMessages[101];
+  defaultMessages.max       = defaultMessages[103];
+  defaultMessages.maxlength = defaultMessages[201];
+  defaultMessages.minlength = defaultMessages[200];
+  defaultMessages.pattern   = defaultMessages[202];
+
   this.setDefaultMessages = function(messages) {
     defaultMessages = messages;
   };
@@ -609,12 +634,13 @@ angular.module('schemaForm').provider('sfErrorMessage', function() {
      * @param {string} error the error code, i.e. tv4-xxx for tv4 errors, otherwise it's whats on
      *                       ngModel.$error for custom errors.
      * @param {Any} value the actual model value.
+     * @param {Any} viewValue the viewValue
      * @param {Object} form a form definition object for this field
      * @param  {Object} global the global validation messages object (even though its called global
      *                         its actually just shared in one instance of sf-schema)
      * @return {string} The error message.
      */
-    service.interpolate = function(error, value, form, global) {
+    service.interpolate = function(error, value, viewValue, form, global) {
       global = global || {};
       var validationMessage = form.validationMessage || {};
 
@@ -640,6 +666,7 @@ angular.module('schemaForm').provider('sfErrorMessage', function() {
       var context = {
         error: error,
         value: value,
+        viewValue: viewValue,
         form: form,
         schema: form.schema,
         title: form.title || (form.schema && form.schema.title)
@@ -1495,7 +1522,7 @@ angular.module('schemaForm').directive('sfMessage',
       }
 
       var update = function(valid) {
-        if (valid && scope.hasError()) {
+        if (valid && !scope.hasError()) {
           element.html(msg);
         } else {
 
@@ -1505,24 +1532,13 @@ angular.module('schemaForm').directive('sfMessage',
 
           // We only show one error.
           // TODO: Make that optional
-          // tv4- errors take precedence
           var error = errors[0];
-          if (errors.length > 1) {
-
-            error = errors.reduce(function(prev, value) {
-              if (prev && prev.indexOf('tv4-') === 0) {
-                return prev;
-              }
-              return value;
-            });
-            console.log('reduced',errors, error)
-
-          }
 
           if (error) {
             element.html(sfErrorMessage.interpolate(
               error,
               scope.ngModel.$modelValue,
+              scope.ngModel.$viewValue,
               scope.form,
               scope.options && scope.options.validationMessage
             ));
@@ -1752,6 +1768,11 @@ angular.module('schemaForm').directive('schemaValidate', ['sfValidator', 'sfSele
           return viewValue;
         }
 
+        // Omit TV4 validation
+        if (scope.options && scope.options.tv4Validation === false) {
+          return viewValue;
+        }
+
         var result =  sfValidator.validate(form, viewValue);
         // Since we might have different tv4 errors we must clear all
         // errors that start with tv4-
@@ -1814,3 +1835,6 @@ angular.module('schemaForm').directive('schemaValidate', ['sfValidator', 'sfSele
     }
   };
 }]);
+
+return schemaForm;
+}));

docs/index.md

@@ -249,8 +249,8 @@ And of global options
 
 
 ### Message Interpolation
-Having a good validation message is hard, sometimes you need to reference the actual value, title
-och constraint that you hit. Schema Form supports interpolation of error messages to make this a
+Having a good validation message is hard, sometimes you need to reference the actual value, title,
+or constraint that you hit. Schema Form supports interpolation of error messages to make this a
 little bit easier.
 
 The context variables available to you are:
@@ -260,6 +260,7 @@ The context variables available to you are:
 | error         | The error code          |
 | title         | Title of the field      |
 | value         | The model value         |
+| viewValue     | The view value (probably the one you want) |
 | form          | form definition object for this field |
 | schema        | schema for this field |
 
@@ -622,12 +623,15 @@ General options most field types can handle:
   validationMessage: "Oh noes, please write a proper address",  // A custom validation error message
   onChange: "valueChanged(form.key,modelValue)", // onChange event handler, expression or function
   feedback: false,             // Inline feedback icons
+  disableSuccessState: false,  // Set true to NOT apply 'has-success' class to a field that was validated successfully
+  disableErrorState: false,    // Set true to NOT apply 'has-error' class to a field that failed validation 
   placeholder: "Input...",     // placeholder on inputs and textarea
   ngModelOptions: { ... },     // Passed along to ng-model-options
   readonly: true,              // Same effect as readOnly in schema. Put on a fieldset or array
                                // and their items will inherit it.
   htmlClass: "street foobar",  // CSS Class(es) to be added to the container div
   fieldHtmlClass: "street"     // CSS Class(es) to be added to field input (or similar)
+  labelHtmlClass: "street"     // CSS Class(es) to be added to the label of the field (or similar)
   copyValueTo: ["address.street"],     // Copy values to these schema keys.
   condition: "person.age < 18" // Show or hide field depending on an angular expression
 }
@@ -726,9 +730,9 @@ the surface it uses `ng-if` so the hidden field is *not* part of the form.
 
 `condition` should be a string with an angular expression. If that expression evaluates as thruthy
 the field will be rendered into the DOM otherwise not. The expression is evaluated in the parent scope of
-the `sf-schema` directive (the same as onClick on buttons) but with access to the current model
-and current array index under the name `model` and `arrayIndex`. This is useful for hiding/showing
-parts of a form depending on another form control.
+the `sf-schema` directive (the same as onClick on buttons) but with access to the current model,
+current model value and current array index under the name `model`, `modelValue` and `arrayIndex`.
+This is useful for hiding/showing parts of a form depending on another form control.
 
 ex. A checkbox that shows an input field for a code when checked
 
@@ -758,8 +762,8 @@ function FormCtrl($scope) {
     "name",
     "eligible",
     {
-      key: "code",
-      condition: "person.eligible", //or "model.eligable"
+      "key": "code",
+      "condition": "person.eligible", //or "model.eligible"
     }
   ]
 }