feat(valdrFormGroup): add new classes for valdr validated form groups

- add ng-dirty, ng-pristine, ng-touched and ng-untouched classes on form group level
netceteragroup · May 26, 2016 · a6d72bf · a6d72bf
1 parent 73deacd
commit a6d72bf
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 2 deletions.
diff --git a/src/core/valdrFormGroup-directive.js b/src/core/valdrFormGroup-directive.js
@@ -28,6 +28,10 @@ var valdrFormGroupDirectiveDefinition =
             invalidDirtyTouchedGroup: false,
             // true if all form items in this group are currently valid
             valid: true,
+            // true if all form items in this group are currently pristine
+            pristine: true,
+            // true if all form items in this group are currently untouched
+            untouched: true,
             // contains the validity states of all form items in this group
             itemStates: []
           };
@@ -37,6 +41,14 @@ var valdrFormGroupDirectiveDefinition =
               formGroupState.invalidDirtyTouchedGroup = true;
             }
 
+            if (formItem.$dirty) {
+              formGroupState.pristine = false;
+            }
+
+            if (formItem.$touched) {
+              formGroupState.untouched = false;
+            }
+
             if (formItem.$invalid) {
               formGroupState.valid = false;
             }
@@ -62,6 +74,10 @@ var valdrFormGroupDirectiveDefinition =
         var updateClasses = function (formGroupState) {
           // form group state
           $element.toggleClass(valdrClasses.invalidDirtyTouchedGroup, formGroupState.invalidDirtyTouchedGroup);
+          $element.toggleClass(valdrClasses.pristine, formGroupState.pristine);
+          $element.toggleClass(valdrClasses.dirty, !formGroupState.pristine);
+          $element.toggleClass(valdrClasses.untouched, formGroupState.untouched);
+          $element.toggleClass(valdrClasses.touched, !formGroupState.untouched);
           $element.toggleClass(valdrClasses.valid, formGroupState.valid);
           $element.toggleClass(valdrClasses.invalid, !formGroupState.valid);
 

diff --git a/src/core/valdrFormGroup-directive.spec.js b/src/core/valdrFormGroup-directive.spec.js
@@ -81,9 +81,15 @@ describe('valdrFormGroup directive', function () {
 
     });
 
-    it('should not set valid and invalidDirtyTouchedGroup classes if all items are valid', function () {
+    it('should not set valid, untouched, pristine and invalidDirtyTouchedGroup classes if all items are valid', function () {
       expect(element.hasClass(valdrClasses.valid)).toBe(true);
       expect(element.hasClass(valdrClasses.invalid)).toBe(false);
+      expect(element.hasClass(valdrClasses.untouched)).toBe(true);
+      expect(element.hasClass(valdrClasses.touched)).toBe(false);
+      expect(element.hasClass(valdrClasses.pristine)).toBe(true);
+      expect(element.hasClass(valdrClasses.dirty)).toBe(false);
+
+
       expect(element.hasClass(valdrClasses.invalidDirtyTouchedGroup)).toBe(false);
     });
 
@@ -97,6 +103,10 @@ describe('valdrFormGroup directive', function () {
       // then
       expect(element.hasClass(valdrClasses.invalid)).toBe(true);
       expect(element.hasClass(valdrClasses.valid)).toBe(false);
+      expect(element.hasClass(valdrClasses.untouched)).toBe(true);
+      expect(element.hasClass(valdrClasses.touched)).toBe(false);
+      expect(element.hasClass(valdrClasses.pristine)).toBe(true);
+      expect(element.hasClass(valdrClasses.dirty)).toBe(false);
       expect(element.hasClass(valdrClasses.invalidDirtyTouchedGroup)).toBe(false);
     });
 
@@ -113,9 +123,51 @@ describe('valdrFormGroup directive', function () {
       // then
       expect(element.hasClass(valdrClasses.invalid)).toBe(true);
       expect(element.hasClass(valdrClasses.valid)).toBe(false);
+      expect(element.hasClass(valdrClasses.untouched)).toBe(false);
+      expect(element.hasClass(valdrClasses.touched)).toBe(true);
+      expect(element.hasClass(valdrClasses.pristine)).toBe(false);
+      expect(element.hasClass(valdrClasses.dirty)).toBe(true);
       expect(element.hasClass(valdrClasses.invalidDirtyTouchedGroup)).toBe(true);
     });
 
+    it('should add dirty, untouched and invalid class and not add pristine, touched and valid class if an input is dirty, untouched and invalid', function () {
+      // given
+      $scope.person.firstName = 'This name is too long for the constraints.';
+      ngModelController.$invalid = true;
+      ngModelController.$dirty = true;
+      ngModelController.$touched = false;
+
+      // when
+      $scope.$digest();
+
+      // then
+      expect(element.hasClass(valdrClasses.invalid)).toBe(true);
+      expect(element.hasClass(valdrClasses.valid)).toBe(false);
+      expect(element.hasClass(valdrClasses.untouched)).toBe(true);
+      expect(element.hasClass(valdrClasses.touched)).toBe(false);
+      expect(element.hasClass(valdrClasses.pristine)).toBe(false);
+      expect(element.hasClass(valdrClasses.dirty)).toBe(true);
+      expect(element.hasClass(valdrClasses.invalidDirtyTouchedGroup)).toBe(false);
+    });
+
+    it('should add dirty, untouched and valid class and not add pristine, touched and invalid class if an input is dirty, untouched and valid', function () {
+      // given
+      ngModelController.$dirty = true;
+      ngModelController.$touched = false;
+
+      // when
+      $scope.$digest();
+
+      // then
+      expect(element.hasClass(valdrClasses.invalid)).toBe(false);
+      expect(element.hasClass(valdrClasses.valid)).toBe(true);
+      expect(element.hasClass(valdrClasses.untouched)).toBe(true);
+      expect(element.hasClass(valdrClasses.touched)).toBe(false);
+      expect(element.hasClass(valdrClasses.pristine)).toBe(false);
+      expect(element.hasClass(valdrClasses.dirty)).toBe(true);
+      expect(element.hasClass(valdrClasses.invalidDirtyTouchedGroup)).toBe(false);
+    });
+
     it('should be valid if no form items are registered', function () {
       // given
       var template = '<form valdr-type="Person" valdr-form-group></form>';
@@ -126,8 +178,12 @@ describe('valdrFormGroup directive', function () {
       // then
       expect(element.hasClass(valdrClasses.valid)).toBe(true);
       expect(element.hasClass(valdrClasses.invalid)).toBe(false);
+      expect(element.hasClass(valdrClasses.untouched)).toBe(true);
+      expect(element.hasClass(valdrClasses.touched)).toBe(false);
+      expect(element.hasClass(valdrClasses.pristine)).toBe(true);
+      expect(element.hasClass(valdrClasses.dirty)).toBe(false);
       expect(element.hasClass(valdrClasses.invalidDirtyTouchedGroup)).toBe(false);
     });
   });
 
-});
+});