Added ngModelOptions and global options

Global defaults can be set with "sf-options", among them
'formDefaults' useful for setting things like  ngModelOptions
and validationMessage for an entire form.

Author: davidlgj

docs/index.md

@@ -2,6 +2,7 @@ Documentation
 =============
 
 1. [Basic Usage](#basic-usage)
+1. [Global Options](#global-options)
 1. [Form types](#form-types)  
 1. [Default form types](#default-form-types)
 1. [Form definitions](#form-definitions)
@@ -10,6 +11,7 @@ Documentation
     1. [onChange](#onchange)
     1. [Validation Messages](#validation-messages)
     1. [Inline feedback icons](#inline-feedback-icons)
+    1. [ngModelOptions](#ngmodeloptions)
 1. [Specific options and types](#specific-options-and-types)
     1. [fieldset and section](#fieldset-and-section)
     1. [conditional](#conditional)
@@ -77,6 +79,35 @@ Example with custom submit buttons:
 </div>
 ```
 
+Global Options
+--------------
+Schema Form also have two options you can set globally via the `sf-options`
+attribute which should be placed along side `sf-schema`.
+
+`sf-options` takes an object with the following possible attributes.
+
+
+| Attribute     |                         |
+|:--------------|:------------------------|
+| supressPropertyTitles | by default schema form uses the property name in the schema as a title if none is specified, set this to true to disable that behavior |
+| formDefaults | an object that will be used as a default for all form definitions |
+
+*formDefaults* is mostly useful for setting global [ngModelOptions](#ngmodeloptions)
+i.e. changing the entire form to validate on blur. But can also be used to set
+[Validation Messages](#validation-messages) for all fields if you like a bit more
+friendlier messages.
+
+Ex.
+```html
+<div ng-controller="FormController">
+    <form sf-schema="schema"
+          sf-form="form"
+          sf-model="model"
+          sf-options="{ formDefaults: { ngModelOptions: { updateOn: 'blur' } }}"></form>
+</div>
+```
+
+
 
 Form types
 ----------
@@ -205,14 +236,15 @@ Standard Options
 General options most field types can handle:
 ```javascript
 {
-  key: "address.street",      //The dot notatin to the attribute on the model
-  type: "text",               //Type of field
-  title: "Street",            //Title of field, taken from schema if available
-  notitle: false,             //Set to true to hide title
-  description: "Street name", //A description, taken from schema if available, can be HTML
-  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
+  key: "address.street",      // The dot notatin to the attribute on the model
+  type: "text",               // Type of field
+  title: "Street",            // Title of field, taken from schema if available
+  notitle: false,             // Set to true to hide title
+  description: "Street name", // A description, taken from schema if available, can be HTML
+  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
+  ngModelOptions: { ... }      // Passed along to ng-model-options
 }
 ```
 
@@ -241,26 +273,29 @@ $scope.form = [
 
 ### Validation Messages
 
-Per default all error messages but "Required" comes from the schema validator
+Per default all error messages comes from the schema validator
 [tv4](https://github.com/geraintluff/tv4), this might or might not work for you.
-If you supply a ```validationMessage``` property in the form definition, and if its value is a
+If you supply a `validationMessage` property in the form definition, and if its value is a
 string that will be used instead on any validation error.
 
 If you need more fine grained control you can supply an object instead with keys matching the error
-codes of [tv4](https://github.com/geraintluff/tv4). See ```tv4.errorCodes```
+codes of [tv4](https://github.com/geraintluff/tv4). See `tv4.errorCodes`
 
 Ex.
 ```javascript
 {
   key: "address.street",
   validationMessage: {
     tv4.errorCodes.STRING_LENGTH_SHORT: "Address is too short, man.",
-    "default": "Just write a proper address, will you?",   //Special catch all error message
-    "required": "I needz an address plz"                   //Used for required if specified
+    "default": "Just write a proper address, will you?"   //Special catch all error message
   }
 }
 ```
 
+You can also set a global `validationMessage` in *formDefaults* see
+[Global Options](#global-options).
+
+
 ### Inline feedback icons
 *input* and *textarea* based fields get inline status icons by default. A check
 when everything is valid and a cross when there are validation errors.
@@ -289,6 +324,26 @@ Useful things in the decorators scope are
 | form           | The form definition for this field |
 
 
+### ngModelOptions
+Angular 1.3 introduces a new directive, *ngModelOptions*, which let's you set
+a couple of options that change how the directive *ng-model* works. Schema Form
+uses *ng-model* to bind against fields and therefore changing theses options
+might be usefule for you.
+
+One thing you can do is to change the update behavior of *ng-model*, this is how
+you get form fields that validate on blur instead of directly on change.
+
+Ex.
+```javascript
+{
+  key: "email",
+  ngModelOptions: { updateOn: 'blur' }
+}
+```
+
+See [Global Options](#global-options) for an example how you set entire form
+to validate on blur. 
+
 
 Specific options and types
 --------------------------

examples/bootstrap-example.html

@@ -35,7 +35,7 @@ <h1>Schema Form Example</h1>
   <div class="row">
     <div class="col-sm-4">
       <h3>The Generated Form</h3>
-      <form name="ngform" sf-model="modelData" sf-form="form" sf-schema="schema" sf-decorator-name="{{decorator}}"></form>
+      <form name="ngform"  sf-model="modelData" sf-form="form" sf-schema="schema"></form>
       <h3>Model</h3>
       <pre ng-cloak>{{pretty()}}</pre>
     </div>

src/directives/decorators/bootstrap/array.html

@@ -1,4 +1,4 @@
-<div sf-array="form" ng-model="$$value$$">
+<div sf-array="form" ng-model="$$value$$" ng-model-options="form.ngModelOptions">
   <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">

src/directives/decorators/bootstrap/checkbox.html

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

src/directives/decorators/bootstrap/default.html

@@ -6,6 +6,7 @@
          sf-changed="form"
          placeholder="{{form.placeholder}}"
          class="form-control"
+         ng-model-options="form.ngModelOptions"
          ng-model="$$value$$"
          schema-validate="form">
   <span ng-if="form.feedback !== false"

src/directives/decorators/bootstrap/radio-buttons.html

@@ -10,6 +10,7 @@
              sf-changed="form"
              style="display: none;"
              ng-model="$$value$$"
+             ng-model-options="form.ngModelOptions"
              ng-value="item.value">
       <span ng-bind-html="item.name"></span>
     </label>

src/directives/decorators/bootstrap/radios.html

@@ -5,6 +5,7 @@
       <input type="radio"
              sf-changed="form"
              ng-model="$$value$$"
+             ng-model-options="form.ngModelOptions"
              ng-value="item.value">
       <span ng-bind-html="item.name"></span>
     </label>

src/directives/decorators/bootstrap/select.html

@@ -3,6 +3,7 @@
     {{form.title}}
   </label>
   <select ng-model="$$value$$"
+          ng-model-options="form.ngModelOptions"
           sf-changed="form"
           class="form-control"
           schema-validate="form"

src/directives/decorators/bootstrap/textarea.html

@@ -3,6 +3,7 @@
   <textarea class="form-control"
             sf-changed="form"
             ng-model="$$value$$"
+            ng-model-options="form.ngModelOptions"
             schema-validate="form"></textarea>
   <!-- disabled until we unbreak the css
     <span ng-if="form.feedback !== false"

src/directives/schema-form.js

@@ -71,9 +71,10 @@ function($compile,  schemaForm,  schemaFormDecorators, sfSelect){
           lastDigest.schema = schema;
           lastDigest.form = form;
 
-          //FIXME: traverse schema and model and set default values.
+          // Check for options
+          var options = scope.$eval(attrs.sfOptions);
 
-          var merged = schemaForm.merge(schema,form,ignore);
+          var merged = schemaForm.merge(schema,form,ignore,options);
           var frag = document.createDocumentFragment();
 
           //make the form available to decorators

src/services/schema-form.js

@@ -43,13 +43,20 @@ angular.module('schemaForm').provider('schemaForm',['sfPathProvider', function(s
 
   //Creates a form object with all common properties
   var stdFormObj = function(name,schema,options) {
-    var f = {};
-    f.title = schema.title || name[0];
+    options = options || {};
+    var f = options.global && options.global.formDefaults ? angular.copy(options.global.formDefaults) : {};
+
+    if (options.global && options.global.supressPropertyTitles === true) {
+      f.title = schema.title;
+    } else {
+      f.title = schema.title || name[0];
+    }
+
     if (schema.description) f.description = schema.description;
     if (options.required === true || schema.required === true) f.required = true;
     if (schema.maxLength) f.maxlength = schema.maxLength;
     if (schema.minLength) f.minlength = schema.maxLength;
-    if (schema.readOnly || schema.readonly)  f.readonly  = schema.readOnly || schema.readonly;
+    if (schema.readOnly || schema.readonly)  f.readonly  = true;
     if (schema.minimum) f.minimum = schema.minimum + (schema.exclusiveMinimum?1:0);
     if (schema.maximum) f.maximum = schema.maximum - (schema.exclusiveMaximum?1:0);
 
@@ -58,8 +65,9 @@ angular.module('schemaForm').provider('schemaForm',['sfPathProvider', function(s
     if (schema.enumNames) f.titleMap = canonicalTitleMap(schema.enumNames);
     f.schema = schema;
 
-    // Ng model options doesn't play nice with undefined
-    f.ngModelOptions = {};
+    // Ng model options doesn't play nice with undefined, might be defined
+    // globally though
+    f.ngModelOptions = f.ngModelOptions || {};
     return f;
   };
 
@@ -268,10 +276,12 @@ angular.module('schemaForm').provider('schemaForm',['sfPathProvider', function(s
 
     var service = {};
 
-    service.merge = function(schema,form,ignore) {
+    service.merge = function(schema, form, ignore, options) {
       form  = form || ["*"];
+      options = options || {};
+
+      var stdForm = service.defaults(schema, ignore, options);
 
-      var stdForm = service.defaults(schema,ignore);
       //simple case, we have a "*", just put the stdForm there
       var idx = form.indexOf("*");
       if (idx !== -1) {
@@ -337,10 +347,11 @@ angular.module('schemaForm').provider('schemaForm',['sfPathProvider', function(s
     /**
      * Create form defaults from schema
      */
-    service.defaults = function(schema,ignore) {
+    service.defaults = function(schema, ignore, globalOptions) {
       var form   = [];
       var lookup = {}; //Map path => form obj for fast lookup in merging
       ignore = ignore || {};
+      globalOptions = globalOptions || {};
 
       if (schema.type === "object") {
         angular.forEach(schema.properties,function(v,k){
@@ -351,7 +362,8 @@ angular.module('schemaForm').provider('schemaForm',['sfPathProvider', function(s
                 path: k,        //path to this property in dot notation. Root object has no name
                 lookup: lookup,    //extra map to register with. Optimization for merger.
                 ignore: ignore,    //The ignore list of paths (sans root level name)
-                required: required //Is it required? (v4 json schema style)
+                required: required, //Is it required? (v4 json schema style)
+                global: globalOptions // Global options, including form defaults
               });
               if (def) {
                 form.push(def);