feat(core): Support form groups with multiple levels

- add findWrappingFormGroup to valdr util to find the parent element - use this function in valdrFormItem directives to determine the parent element
netceteragroup · Jun 2, 2014 · fd39e15 · fd39e15
1 parent a33a454
commit fd39e15
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 35 deletions.
diff --git a/demo/core/custom-validator.html b/demo/core/custom-validator.html
@@ -10,7 +10,7 @@
   <h1>Custom Validator Demo</h1>
 
   <form name="demoForm" novalidate valdr-type="Person">
-      <div>
+      <div class="form-group">
         <label for="lastName">Last Name</label>
         <input type="text"
                id="lastName"
@@ -19,7 +19,7 @@ <h1>Custom Validator Demo</h1>
         <span>$valid {{ demoForm.lastName.$valid }}</span>
       </div>
 
-      <div>
+      <div class="form-group">
         <label for="firstName">First Name</label>
         <input type="text"
                id="firstName"

diff --git a/demo/core/list.html b/demo/core/list.html
@@ -26,7 +26,7 @@ <h1>List Demo</h1>
     <div valdr-type="Person">
 
       <h4>Person</h4>
-      <div>
+      <div class="form-group">
         <label for="firstName">First Name</label>
         <input type="text"
                id="firstName"
@@ -38,7 +38,7 @@ <h4>Person</h4>
 
     <div ng-form="addressForm" valdr-type="Address" ng-repeat="address in person.addresses">
       <h4>Address {{ $index + 1 }} <button ng-click="removeAddress(address)" >remove</button></h4>
-      <div>
+      <div class="form-group">
         <label for="zipCode">Zip Code</label>
         <input type="text"
                id="zipCode"
@@ -47,7 +47,7 @@ <h4>Address {{ $index + 1 }} <button ng-click="removeAddress(address)" >remove</
         <span>$valid {{ addressForm.zipCode.$valid }}</span>
       </div>
 
-      <div>
+      <div class="form-group">
         <label for="email">E-Mail</label>
         <input type="text"
                id="email"

diff --git a/demo/core/load-constraints.html b/demo/core/load-constraints.html
@@ -13,7 +13,7 @@ <h1>Async Demo</h1>
 
     <div valdr-type="Person">
 
-      <div>
+      <div class="form-group">
         <label for="lastName">Last Name</label>
         <input type="text"
                id="lastName"
@@ -22,7 +22,7 @@ <h1>Async Demo</h1>
         <span>$valid {{ demoForm.lastName.$valid }}</span>
       </div>
 
-      <div>
+      <div class="form-group">
         <label for="firstName">First Name</label>
         <input type="text"
                id="firstName"
@@ -31,7 +31,7 @@ <h1>Async Demo</h1>
         <span>$valid {{ demoForm.firstName.$valid }}</span>
       </div>
 
-      <div>
+      <div class="form-group">
         <label for="zipCode">Zip Code</label>
         <input type="text"
                id="zipCode"

diff --git a/demo/core/simple.html b/demo/core/simple.html
@@ -14,7 +14,7 @@ <h1>Simple Demo</h1>
     <div valdr-type="Person">
 
       <h4>Person</h4>
-      <div>
+      <div class="form-group">
         <label for="lastName">Last Name</label>
         <input type="text"
                id="lastName"
@@ -23,7 +23,7 @@ <h4>Person</h4>
         <span>$valid {{ demoForm.lastName.$valid }}</span>
       </div>
 
-      <div>
+      <div class="form-group">
         <label for="firstName">First Name</label>
         <input type="text"
                id="firstName"
@@ -33,7 +33,7 @@ <h4>Person</h4>
       </div>
 
 
-      <div>
+      <div class="form-group">
         <label for="age">Age</label>
         <input type="number"
                id="age"
@@ -42,7 +42,7 @@ <h4>Person</h4>
         <span>$valid {{ demoForm.age.$valid }}</span>
       </div>
 
-      <div>
+      <div class="form-group">
         <label for="gender">Gender</label>
         <select id="gender"
                name="gender"
@@ -53,7 +53,7 @@ <h4>Person</h4>
         <span>$valid {{ demoForm.gender.$valid }}</span>
       </div>
 
-      <div>
+      <div class="form-group">
         <label for="bio">Bio</label>
         <textarea
                id="bio"
@@ -63,7 +63,7 @@ <h4>Person</h4>
         <span>$valid {{ demoForm.bio.$valid }}</span>
       </div>
 
-      <div>
+      <div class="form-group">
         <label for="homepage">Homepage</label>
         <input type="text"
                id="homepage"
@@ -74,7 +74,7 @@ <h4>Person</h4>
 
       <h4>Address</h4>
       <div valdr-type="Address">
-        <div>
+        <div class="form-group">
           <label for="zipCode">Zip Code</label>
           <input type="text"
                  id="zipCode"
@@ -83,7 +83,7 @@ <h4>Address</h4>
           <span>$valid {{ demoForm.zipCode.$valid }}</span>
         </div>
 
-        <div>
+        <div class="form-group">
           <label for="email">E-Mail</label>
           <input type="text"
                  id="email"

diff --git a/demo/message/angular-translate.html b/demo/message/angular-translate.html
@@ -19,17 +19,19 @@ <h1>angular-translate Demo</h1>
     <div valdr-type="Person">
 
       <h4>Person</h4>
-      <div>
+      <div class="form-group">
         <label for="lastName">Last Name</label>
-        <input type="text"
-               id="lastName"
-               name="lastName"
-               ng-model="person.lastName">
+        <div class="some-class">
+          <input type="text"
+                 id="lastName"
+                 name="lastName"
+                 ng-model="person.lastName">
+        </div>
 
         <pre>{{ demoForm.lastName.valdrViolations | json }}</pre>
       </div>
 
-      <div>
+      <div class="form-group">
         <label for="firstName">First Name</label>
         <input type="text"
                id="firstName"

diff --git a/demo/message/simple.html b/demo/message/simple.html
@@ -30,15 +30,15 @@ <h1>Message Demo</h1>
     <div valdr-type="Person">
 
       <h4>Person</h4>
-      <div>
+      <div class="form-group">
         <label for="lastName">Last Name</label>
         <input type="text"
                id="lastName"
                name="lastName"
                ng-model="person.lastName">
       </div>
 
-      <div>
+      <div class="form-group">
         <label for="firstName">First Name</label>
         <input type="text"
                id="firstName"
@@ -48,7 +48,7 @@ <h4>Person</h4>
         <span><em>Error message disabled for this field.</em></span>
       </div>
 
-      <div>
+      <div class="form-group">
         <label for="age">Age</label>
         <input type="number"
                id="age"
@@ -57,7 +57,7 @@ <h4>Person</h4>
 
       </div>
 
-      <div>
+      <div class="form-group">
         <label for="gender">Gender</label>
         <select id="gender"
                 name="gender"

diff --git a/src/core/valdrFormItem-directive.js b/src/core/valdrFormItem-directive.js
@@ -12,7 +12,7 @@ var valdrFormItemDirectiveDefinition =
         var valdrTypeController = controllers[0],
           ngModelController = controllers[1],
           fieldName = attrs.name,
-          parentElement = element.parent();
+          formGroupElement;
 
         // Stop right here if this is a form item that's either not inside of a valdr-type block
         // or there is no ng-model bound to it.
@@ -24,9 +24,11 @@ var valdrFormItemDirectiveDefinition =
           throw new Error('form element is not bound to a field name');
         }
 
-        var updateClassOnParentElement = function (valid) {
-          parentElement.toggleClass(valdrClasses.valid, valid);
-          parentElement.toggleClass(valdrClasses.invalid, !valid);
+        formGroupElement = valdrUtil.findWrappingFormGroup(element);
+
+        var updateClassOnFormGroup = function (valid) {
+          formGroupElement.toggleClass(valdrClasses.valid, valid);
+          formGroupElement.toggleClass(valdrClasses.invalid, !valid);
         };
 
         var updateNgModelController = function (validationResult) {
@@ -37,7 +39,7 @@ var valdrFormItemDirectiveDefinition =
         var validate = function (value) {
           var validationResult = valdr.validate(valdrTypeController.getType(), fieldName, value);
           updateNgModelController(validationResult);
-          updateClassOnParentElement(validationResult.valid);
+          updateClassOnFormGroup(validationResult.valid);
           return validationResult.valid ? value : undefined;
         };
 
@@ -50,7 +52,7 @@ var valdrFormItemDirectiveDefinition =
 
         element.bind('blur', function () {
           if (ngModelController.$invalid && ngModelController.$dirty) {
-            parentElement.addClass(valdrClasses.dirtyBlurred);
+            formGroupElement.addClass(valdrClasses.dirtyBlurred);
           }
         });
       }

diff --git a/src/core/valdrUtil-service.js b/src/core/valdrUtil-service.js
@@ -3,7 +3,7 @@ angular.module('valdr')
 /**
  * Exposes utility functions used in validators and valdr core.
  */
-  .factory('valdrUtil', function () {
+  .factory('valdrUtil', ['valdrClasses', function (valdrClasses) {
     return {
 
       isNaN: function (value) {
@@ -42,7 +42,25 @@ angular.module('valdr')
           return false;
         }
         return !this.notEmpty(value);
+      },
+
+      /**
+       * Finds the parent element with the class defined in valdrClasses.formGroup. Only searches 3 levels above
+       * the given element. If no element is found with this class, returns the parent of the given element.
+       * @param element the element
+       * @returns {*} the wrapping form group
+       */
+      findWrappingFormGroup: function (element) {
+        var parent = element.parent();
+        for (var i = 0; i < 3; i++) {
+          if (parent.hasClass(valdrClasses.formGroup)) {
+            return parent;
+          } else {
+            parent = parent.parent();
+          }
+        }
+        return element.parent();
       }
     };
-  })
+  }])
 ;
diff --git a/src/core/valdrUtil-service.spec.js b/src/core/valdrUtil-service.spec.js
@@ -88,4 +88,65 @@ describe('valdrUtil', function () {
 
   });
 
+  describe('findWrappingFormGroup()', function () {
+
+    it ('should find the parent element with class form-group', function () {
+      // given
+      var element = angular.element(
+        '<div class="form-group">' +
+          '<div>' +
+            '<section>' +
+              '<p></p>' +
+            '</section>' +
+          '</div>' +
+        '</div>');
+      var child = element.find('p');
+
+      // when
+      var formGroupElement = valdrUtil.findWrappingFormGroup(child);
+
+      // then
+      expect(formGroupElement.hasClass('form-group')).toBe(true);
+    });
+
+    it ('should return parent if no form-group is found', function () {
+      // given
+      var element = angular.element(
+        '<div>' +
+          '<section class="parent">' +
+            '<p></p>' +
+          '</section>' +
+        '</div>');
+      var child = element.find('p');
+
+      // when
+      var parent = valdrUtil.findWrappingFormGroup(child);
+
+      // then
+      expect(parent.hasClass('parent')).toBe(true);
+    });
+
+    it ('should return parent if no form-group is found in next 3 levels', function () {
+      // given
+      var element = angular.element(
+        '<div class="form-group">' +
+          '<div>' +
+            '<div>' +
+              '<div class="parent">' +
+                '<p></p>' +
+              '</div>' +
+            '</div>' +
+          '</div>' +
+        '</div>');
+      var child = element.find('p');
+
+      // when
+      var parent = valdrUtil.findWrappingFormGroup(child);
+
+      // then
+      expect(parent.hasClass('parent')).toBe(true);
+    });
+
+  });
+
 });
diff --git a/src/valdr.js b/src/valdr.js
@@ -5,5 +5,6 @@ angular.module('valdr', ['ng'])
   .value('valdrClasses', {
     valid: 'has-success',
     invalid: 'has-error',
-    dirtyBlurred: 'dirty-blurred'
+    dirtyBlurred: 'dirty-blurred',
+    formGroup: 'form-group'
   });