Merge pull request #151 from Availity/feature/validation-without-dirt…

…y-model Add support to show fields in error even when their models are clean
Availity · Oct 17, 2015 · e37bd01 · e37bd01
2 parents 6d94808 + a1e4b0b
commit e37bd01
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 31 deletions.
diff --git a/lib/ui/validation/docs/validation-ui-demo.html b/lib/ui/validation/docs/validation-ui-demo.html
@@ -122,6 +122,17 @@
       </div>
       <p data-av-val-container id="container-1"></p>
     </div>
+    <div class="form-group">
+      <label for="someRequiredField50">Field that show an error immediately</label>
+      <input type="text"
+       class="form-control"
+       id="someRequiredField50"
+       data-ng-model="demo.someRequiredField"
+       data-av-val-field="someRequiredField"
+       data-av-val-show="true"
+      />
+      <p data-av-val-container></p>
+    </div>
     <div class="form-group">
       <div class="checkbox">
         <input id="demoCheck"
@@ -160,6 +171,9 @@
 
 <!-- Javascript -->
 <script>
+
+/* global availity */
+
 availity.demo.config(function(avAnalyticsProvider, avValProvider) {
 
   var defaultRules = {

diff --git a/lib/ui/validation/docs/validation-ui-demo.js b/lib/ui/validation/docs/validation-ui-demo.js
@@ -116,6 +116,11 @@
         'email': {
           'message': 'Email is invalid'
         }
+      },
+      'someRequiredField': {
+        'required': {
+          'message': 'This field is required, and the validation error shows even with a clean model.'
+        }
       }
     };
 

diff --git a/lib/ui/validation/field.js b/lib/ui/validation/field.js
@@ -66,7 +66,7 @@
     };
 
     this.updateView = function() {
-      if(this.ngModel.$dirty) {
+      if(this.ngModel.$dirty || $scope.avValShow) {
         avValAdapter.element($element, this.ngModel, this.ngModel.avResults.isValid);
         avValAdapter.message($element, this.ngModel);
       }
@@ -180,7 +180,8 @@
       require: ['^avValForm', 'ngModel', 'avValField'],
       scope: {
         avValDebounce: '@?',
-        avValOn: '@?'
+        avValOn: '@?',
+        avValShow: '=?'
       },
       link: function(scope, element, attrs, controllers) {
 

diff --git a/lib/ui/validation/tests/adapter-bootstrap-fixture.html b/lib/ui/validation/tests/adapter-bootstrap-fixture.html
@@ -0,0 +1,7 @@
+<form name="myForm" data-av-val-form="default">
+  <div class="form-group">
+    <label for="text3">Label for text input</label>
+    <input data-ng-model="model.lastName" name="lastName" type="text" data-av-val-field="lastName"/>
+    <p class="help-block">Example block-level help text here.</p>
+  </div>
+</form>
diff --git a/lib/ui/validation/tests/adapter-bootstrap-spec.js b/lib/ui/validation/tests/adapter-bootstrap-spec.js
@@ -4,7 +4,7 @@ describe('avValBootstrapAdapter', function() {
   'use strict';
 
   beforeEach(function() {
-    module('availity', function(avValProvider) {
+    module('availity', 'availity.ui', 'availity.ui.templates', function(avValProvider) {
       avValProvider.addRules({
         'default': {
           'lastName': {
@@ -21,7 +21,6 @@ describe('avValBootstrapAdapter', function() {
 
       });
     });
-    module('availity.ui');
   });
 
   availity.mock.directiveSpecHelper();
@@ -30,16 +29,11 @@ describe('avValBootstrapAdapter', function() {
   var $el;
   var AV_BOOTSTRAP_ADAPTER;
 
-  beforeEach(inject(function(_AV_BOOTSTRAP_ADAPTER_) {
+  beforeEach(inject(function(_AV_BOOTSTRAP_ADAPTER_, _$templateCache_) {
+
     AV_BOOTSTRAP_ADAPTER = _AV_BOOTSTRAP_ADAPTER_;
-    var template = '' +
-    '<form name="myForm" data-av-val-form="default">' +
-      '<div class="form-group">' +
-        '<label for="text3">Label for text input</label>' +
-        '<input data-ng-model="model.lastName" name="lastName" type="text" data-av-val-field="lastName"/>' +
-        '<p class="help-block">Example block-level help text here.</p>' +
-      '</div>' +
-    '</form>';
+    var templateCache = _$templateCache_;
+    var template  = templateCache.get('ui/validation/tests/adapter-bootstrap-fixture.html');
 
     $form = availity.mock.compileDirective(template);
     $el = $form.find('input[name="lastName"]');

diff --git a/lib/ui/validation/tests/field-fixture.html b/lib/ui/validation/tests/field-fixture.html
@@ -0,0 +1,17 @@
+<form name="myForm" data-av-val-form="default">
+  <input data-ng-model="demo.firstName" name="firstName" type="text" data-av-val-field="firstName"/>
+  <div id="lastNameFormGroup" class="form-group">
+    <label for="lastName">Last Name</label>
+    <input id="lastName" data-ng-model="demo.lastName" class="form-control" name="lastName" type="text" data-av-val-field="lastName"/>
+    <p id="lastNameErrorMessage" data-av-val-container></p>
+  </div>
+  <input data-ng-model="demo.invalidAllowed" name="invalidAllowed" type="text" data-av-val-field="lastName" data-av-val-invalid="true"/>
+  <div id="showOnLoadFormGroup" class="form-group">
+    <input data-ng-model="demo.showOnLoad" name="showOnLoad" type="text" data-av-val-field="lastName" data-av-val-show="true"/>
+    <p data-av-val-container></p>
+  </div>
+  <input data-ng-model="demo.city" name="city" type="text"/>
+  <input data-ng-model="demo.state" name="state" type="text"/>
+  <input data-ng-model="demo.zip" name="zip"  type="text" data-av-val-field="zip" data-av-val-on="blur"/>
+  <input data-ng-model="demo.date" name="date" type="text" data-av-datepicker data-av-val-field="dateFormat">
+</form>;
diff --git a/lib/ui/validation/tests/field-spec.js b/lib/ui/validation/tests/field-spec.js
@@ -1,11 +1,11 @@
-/*global availity, describe, it, beforeEach, expect, module*/
+/*global availity, inject, describe, it, beforeEach, expect, module*/
 
 describe('avValField', function() {
 
   'use strict';
 
   beforeEach(function() {
-    module('availity', function(avValProvider) {
+    module('availity', 'availity.ui', 'availity.ui.templates', function(avValProvider) {
       avValProvider.addRules({
         'default': {
           'lastName': {
@@ -30,7 +30,6 @@ describe('avValField', function() {
         }
       });
     });
-    module('availity.ui');
   });
 
   availity.mock.directiveSpecHelper();
@@ -42,24 +41,16 @@ describe('avValField', function() {
     availity.mock.$scope.demo = {};
     availity.mock.$scope.demo.rules = 'default';
 
-    var template = '' +
-    '<form name="myForm" data-av-val-form="default">' +
-      '<input data-ng-model="demo.firstName" name="firstName" type="text" data-av-val-field="firstName"/>' +
-      '<div id="lastNameFormGroup" class="form-group">' +
-        '<label for="lastName">Last Name</label>' +
-        '<input id="lastName" data-ng-model="demo.lastName" class="form-control" name="lastName" type="text" data-av-val-field="lastName"/>' +
-        '<p id="lastNameErrorMessage" data-av-val-container></p>' +
-      '</div>' +
-      '<input data-ng-model="demo.invalidAllowed" name="invalidAllowed" type="text" data-av-val-field="lastName" data-av-val-invalid="true"/>' +
-      '<input data-ng-model="demo.city" name="city" type="text"/>' +
-      '<input data-ng-model="demo.state" name="state" type="text"/>' +
-      '<input data-ng-model="demo.zip" name="zip"  type="text" data-av-val-field="zip" data-av-val-on="blur"/>' +
-      '<input data-ng-model="demo.date" name="date" type="text" data-av-datepicker data-av-val-field="dateFormat">' +
-    '</form>';
+  });
+
+  beforeEach(inject(function(_$templateCache_) {
+
+    var $templateCache = _$templateCache_;
+    var template  = $templateCache.get('ui/validation/tests/field-fixture.html');
 
     $el = availity.mock.compileDirective(template);
 
-  });
+  }));
 
   it('should be valid and model should updated with new value', function() {
     availity.mock.$scope.myForm.lastName.$setViewValue('lastName');
@@ -85,6 +76,15 @@ describe('avValField', function() {
     expect(availity.mock.$scope.demo.invalidAllowed).toBe('1');
   });
 
+  it('should have .has-error class on form group when options.show === true', function() {
+    availity.mock.$scope.myForm.showOnLoad.$setViewValue('1');
+    availity.mock.$scope.$digest();
+
+    var formGroup = $('#showOnLoadFormGroup');
+    expect(availity.mock.$scope.myForm.invalidAllowed.$invalid).toBe(true);
+    expect(formGroup.hasClass('has-error')).toBeTruthy();
+  });
+
   it('should have .has-error class on form-group', function () {
     availity.mock.$scope.myForm.lastName.$setViewValue('1');
     availity.mock.$scope.$digest();