Merge pull request #253 from Availity/feature/container-id-and-av-val…

…-show

Fixes for avValShow and av-val-container with custom ids

lib/ui/validation/adapter-bootstrap.js

@@ -14,8 +14,7 @@
       NAVBAR: 'navbar-fixed-top'
     },
     SELECTORS: {
-      CONTAINER: 'container-id',
-      DATA_CONTAINER: 'data-container-id'
+      CONTAINER: 'container-id'
     },
     CONTROLLER: '$avValContainerController'
   });
@@ -36,7 +35,7 @@
         element.parents(AV_BOOTSTRAP_ADAPTER.CLASSES.FORM_GROUP).removeClass(AV_BOOTSTRAP_ADAPTER.CLASSES.ERROR);
       },
 
-      message: function(element, ngModel) {
+      message: function(element, ngModel, attrs) {
 
         var selector = [
           '.',
@@ -45,10 +44,9 @@
 
         var $el = $(element);
 
-        var target = $el.attr(AV_BOOTSTRAP_ADAPTER.SELECTORS.CONTAINER);
-        target = target || $el.attr(AV_BOOTSTRAP_ADAPTER.SELECTORS.DATA_CONTAINER);
-        // default to siblings
-        target = target ? $('#' + target) : $el.siblings(selector);
+        var targetId = attrs[attrs.$normalize(AV_BOOTSTRAP_ADAPTER.SELECTORS.CONTAINER)];
+
+        var target = targetId ? $('#' + targetId) : $el.siblings(selector);
 
         if(target.length === 0) {
           $log.warn('avValBootstrapAdapter could not find validation container for {0}', [element]);

lib/ui/validation/adapter.js

@@ -33,8 +33,8 @@
         this.adapter.reset(element);
       };
 
-      proto.message = function(element, ngModel) {
-        this.adapter.message(element, ngModel);
+      proto.message = function(element, ngModel, attrs) {
+        this.adapter.message(element, ngModel, attrs);
       },
 
       proto.scroll = function(form) {

lib/ui/validation/field.js

@@ -68,7 +68,7 @@
     this.updateView = function() {
       if(this.ngModel.$dirty || $scope.avValShow) {
         avValAdapter.element($element, this.ngModel, this.ngModel.avResults.isValid);
-        avValAdapter.message($element, this.ngModel);
+        avValAdapter.message($element, this.ngModel, $attrs);
       }
     };
 
@@ -143,7 +143,7 @@
       var violations = this.ngModel.avResults.violations;
       violations.splice(0, violations.length);
 
-      avValAdapter.message($element, this.ngModel);
+      avValAdapter.message($element, this.ngModel, $attrs);
       avValAdapter.reset($element);
 
     };

lib/ui/validation/form.js

@@ -125,7 +125,7 @@
             // fields inside the form would inherit this behavior.
             avForm.avValOn = iAttrs.avValOn || null;
             avForm.avValDebounce = iAttrs.avValDebounce || null;
-            avForm.avValShow = scope.$eval(iAttrs.avValShow) || null;
+            avForm.avValShow = iAttrs.avValShow || null;
             // Allows fields to update with invalid data for dirty form saving
             avForm.avValInvalid = iAttrs.avValInvalid || false;
 

lib/ui/validation/tests/form-spec.js

@@ -120,40 +120,38 @@ describe('avForm', function() {
     expect(formGroup.hasClass('has-error')).toBeTruthy();
   });
 
-  it('should not immediately create an error if avValShow variable is false', function() {
+  it('should validate inside ng-repeat', function() {
     var template = '' +
-    '<form name="myForm" ng-submit="submit()" data-av-val-form="demo.rules" data-av-val-show="demo.showError">' +
-      '<div id="showOnLoadFormGroup" class="form-group">' +
-        '<input data-ng-model="demo.showOnLoad" name="showOnLoad" type="text" data-av-val-field="lastName"/>' +
+    '<form name="myForm" ng-submit="submit()" data-av-val-form="demo.rules">'+
+      '<div id="showOnLoadFormGroup" class="form-group" ng-repeat="name in demo.names">' +
+        '<input data-ng-model="name" name="name-{{$index}}" av-val-show="true" value="{{name}}" id="name-{{$index}}" type="text" data-av-val-field="lastName"/>' +
         '<p data-av-val-container></p>' +
       '</div>' +
     '</form>';
 
-    availity.mock.$scope.demo.showError = false;
-
+    availity.mock.$scope.demo.names = ["charizard", "blastoise", "venasaur", "mewtwo", "mew", "pikachu", "m"];
     $el = availity.mock.compileDirective(template);
-    availity.mock.$scope.$digest();
-
-    var formGroup = $('#showOnLoadFormGroup');
-    expect(formGroup.hasClass('has-error')).toBeFalsy();
+    var invalidName = $('#name-6');
+    expect(invalidName.hasClass('ng-invalid')).toBeTruthy();
+    var validName = $('#name-5');
+    expect(validName.hasClass('ng-invalid')).toBeFalsy();
   });
 
-  it('should immediately create an error if avValShow variable is true', function() {
+  it('should validate inside ng-repeat with container-id', function() {
     var template = '' +
-    '<form name="myForm" ng-submit="submit()" data-av-val-form="demo.rules" data-av-val-show="demo.showError">' +
-      '<div id="showOnLoadFormGroup" class="form-group">' +
-        '<input data-ng-model="demo.showOnLoad" name="showOnLoad" type="text" data-av-val-field="lastName"/>' +
-        '<p data-av-val-container></p>' +
+    '<form name="myForm" ng-submit="submit()" data-av-val-form="demo.rules">'+
+      '<div id="showOnLoadFormGroup" class="form-group" ng-repeat="name in demo.names">' +
+        '<input data-ng-model="name" name="name-{{$index}}" container-id="name-{{$index}}" av-val-show="true" value="{{name}}" id="name-{{$index}}" type="text" data-av-val-field="lastName"/>' +
+        '<p data-av-val-container id="name-{{$index}}"></p>' +
       '</div>' +
     '</form>';
 
-    availity.mock.$scope.demo.showError = true;
-
+    availity.mock.$scope.demo.names = ["charizard", "blastoise", "venasaur", "mewtwo", "mew", "pikachu", "m"];
     $el = availity.mock.compileDirective(template);
-    availity.mock.$scope.$digest();
-
-    var formGroup = $('#showOnLoadFormGroup');
-    expect(formGroup.hasClass('has-error')).toBeTruthy();
+    var invalidName = $('#name-6');
+    expect(invalidName.hasClass('ng-invalid')).toBeTruthy();
+    var validName = $('#name-5');
+    expect(validName.hasClass('ng-invalid')).toBeFalsy();
   });
 
   describe('submit', function() {