Inline feedback icons on inputs and textarea

Configurable via form, error and validated as default. Also
added "has-success" class when validated.

Author: davidlgj

README.md

@@ -179,7 +179,8 @@ General options most field types can handle:
   notitle: false,             //Set to true to hide title
   description: "Street name", //A description, taken from schema if available
   validationMessage: "Oh noes, please write a proper address",  //A custom validation error message
-  onChange: "valueChanged(form.key,modelValue)" //onChange event handler, expression or function
+  onChange: "valueChanged(form.key,modelValue)", //onChange event handler, expression or function
+  feedback: false             //inline feedback icons
 }
 ```
 
@@ -228,6 +229,34 @@ Ex.
 }
 ```
 
+### 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.
+
+This can be turned off or configured to other icons. To turn off just
+set ```feedback``` to false. If set to a string that string is evaluated by
+a ```ngClass``` in the decorators scope. If not set att all the default value
+is ```{ 'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }```
+
+ex. displaying an asterisk on required fields
+```javascript
+  $sope.form = [
+    {
+      key: "name",
+      feedback: "{ 'glyphicon': true, 'glyphicon-asterisk': form.requires && !hasSuccess && !hassError() ,'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }"
+    }
+```
+
+Useful things in the decorators scope are
+
+| Name           | Description|
+|:---------------|:----------:|
+| hasSuccess()   | *true* if field is valid and not pristine |
+| hasError()     | *true* if field is invalid and not pristine |
+| ngModel        | The controller of the ngModel directive, ex. ngModel.$valid |
+| form           | The form definition for this field |
+
+
 
 Specific options per type
 -------------------------

src/bootstrap-example.html

@@ -137,11 +137,18 @@ <h3>Schema</h3>
     {
       key: "name",
       placeholder: "Check the console",
-      onChange: "log(modelValue)"
+      onChange: "log(modelValue)",
+      feedback: "{'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-star': !hasSuccess() }"
+    },
+    {
+      key: "favorite",
+      feedback: false
     },
-    { key: "favorite"},
     "attributes",
-    "shoesize",
+    {
+      key: "shoesize",
+      feedback: false
+    },
     "things",
     "soul",
     {

src/directives/decorators/bootstrap/checkbox.html

@@ -1,4 +1,4 @@
-<div class="checkbox" ng-class="{'has-error': hasError()}">
+<div class="checkbox" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
   <label>
     <input type="checkbox"
            sf-changed="form"

src/directives/decorators/bootstrap/checkboxes.html

@@ -1,4 +1,4 @@
-<div class="form-group" ng-class="{'has-error': hasError()}" ng-init="checkboxValues = {}">
+<div class="form-group" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}" ng-init="checkboxValues = {}">
   <label ng-show="showTitle()">{{form.title}}</label>
   <div class="checkbox" ng-repeat="(value,name) in form.titleMap" >
     <label>
@@ -8,6 +8,7 @@
              ng-change="$$value$$ = checkboxValuesToList(checkboxValues)" >
       {{name}}
     </label>
+
   </div>
   <span class="help-block" ng-show="form.description">{{form.description}}</span>
 </div>

src/directives/decorators/bootstrap/default.html

@@ -1,14 +1,16 @@
-<div class="form-group" ng-class="{'has-error': hasError()}">
-  <label ng-show="showTitle()">{{form.title}}</label>
+<div class="form-group" ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false }">
+  <label class="control-label" ng-show="showTitle()">{{form.title}}</label>
 
   <input ng-show="form.key"
          type="{{form.type}}"
          sf-changed="form"
          placeholder="{{form.placeholder}}"
-         class="form-control"
+         class="form-control",
          ng-required="form.required"
          ng-model="$$value$$"
          schema-validate="form.schema">
-
+  <span ng-if="form.feedback !== false"
+        class="form-control-feedback"
+        ng-class="evalInScope(form.feedback) || {'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }"></span>
   <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>
 </div>

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

@@ -1,4 +1,4 @@
-<div class="form-group" ng-class="{'has-error': hasError()}">
+<div class="form-group" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
   <label ng-show="showTitle()">{{form.title}}</label>
   <div class="btn-group">
     <label class="btn btn-primary"

src/directives/decorators/bootstrap/radios.html

@@ -1,4 +1,4 @@
-<div class="form-group" ng-class="{'has-error': hasError()}">
+<div class="form-group" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
   <label ng-show="showTitle()">{{form.title}}</label>
   <div class="radio" ng-repeat="(value,name) in form.titleMap" >
     <label>

src/directives/decorators/bootstrap/select.html

@@ -1,4 +1,4 @@
-<div class="form-group" ng-class="{'has-error': hasError()}">
+<div class="form-group" ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}">
   <label ng-show="showTitle()">
     {{form.title}}
   </label>

src/directives/decorators/bootstrap/textarea.html

@@ -1,10 +1,12 @@
-<div class="form-group" ng-class="{'has-error': hasError()}">
+<div class="form-group has-feedback" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
   <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>
-
+  <span ng-if="form.feedback !== false"
+        class="form-control-feedback"
+        ng-class="evalInScope(form.feedback) || { 'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }"></span>
   <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}} </span>
 </div>

src/directives/schema-validate.js

@@ -5,7 +5,10 @@ angular.module('schemaForm').directive('schemaValidate',function(){
     scope: false,
     require: 'ngModel',
     link: function(scope,element,attrs,ngModel) {
+      //Since we have scope false this is the same scope
+      //as the decorator
       scope.ngModel = ngModel;
+
       var error = null;
       var schema  = scope.$eval(attrs.schemaValidate);
 
@@ -55,6 +58,10 @@ angular.module('schemaForm').directive('schemaValidate',function(){
       });
 
       //This works since we now we're inside a decorator and that this is the decorators scope.
+      scope.hasSuccess = function(){
+        return scope.ngModel.$valid && !scope.ngModel.$pristine;
+      };
+      
       scope.hasError = function(){
         return scope.ngModel.$invalid && !scope.ngModel.$pristine;
       };
@@ -65,4 +72,4 @@ angular.module('schemaForm').directive('schemaValidate',function(){
 
     }
   };
-});
+});