RemoveValidator in Directive, fixed ngDisabled in Service

- Added RemoveValidator( ) for Directive as well
- Added Protractor tests on RemoveValidator( ) for both the Directive
and Service
- Fixed ngDisabled not working correctly in Service
- Added Protractor tests for ngDisabled On/Off in both Directive and
Service

Author: ghiscoding

app.js

@@ -40,14 +40,22 @@ myApp.controller('Ctrl', ['$location', '$route', '$scope', '$translate', functio
 myApp.controller('CtrlValidationDirective', ['$q', '$scope', 'validationService', function ($q, $scope, validationService) {
   $scope.$validationOptions = { debounce: 1500, preValidateFormElements: false }; // you can change default debounce globally
 
+  // remove a single element ($scope.form1, string)
+  // OR you can also remove multiple elements through an array type .removeValidator($scope.form1, ['input2','input3'])
+  $scope.removeInputValidator = function ( elmName ) {
+    new validationService().removeValidator($scope.form1, elmName);
+  };
+
   $scope.submitForm = function() {
     if(new validationService().checkFormValidity($scope.form1)) {
       alert('All good, proceed with submit...');
     }
   }
+
   $scope.showValidationSummary = function () {
     $scope.displayValidationSummary = true;
   }
+
   $scope.customRemoteValidationCall = function() {
     var deferred = $q.defer();
     setTimeout(function() {
@@ -126,7 +134,8 @@ myApp.controller('CtrlValidationService', ['$q', '$scope', '$translate', 'valida
     .addValidator({elmName: 'input17', rules: 'alpha_spaces|exact_len:3|required', debounce: 3000})
     .addValidator('input18', 'date_iso_min:2001-01-01|required')
     .addValidator('input19', 'date_us_short_between:11/28/99,12/31/15|required')
-    .addValidator('area1', 'alpha_dash_spaces|min_len:15|required');
+    .addValidator('area1', 'alpha_dash_spaces|min_len:15|required')
+    .addValidator('input20', 'alpha_dash|min_len:2|required');
 
   // remove a single element ($scope.form1, string)
   // OR you can also remove multiple elements through an array type .removeValidator($scope.form1, ['input2','input3'])

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.3.28",
+  "version": "1.3.29",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": [

changelog.txt

@@ -29,4 +29,5 @@ Angular-Validation change logs
 1.3.25 (2015-05-19) Enhancement #34 to add Remote Validation and updated Protractor to cover this new feature.
 1.3.26 (2015-05-30) Added enhancement #35 - PreValidate the Form, display all errors on page load.
 1.3.27 (2015-06-02) Added possibility to use own isolated scope (issue #37 and #26). Fixed an implementation issue found from last revision (issue #35). Fixed email validation (issue #38). Fixed a performance issue found with onBlur which would run as much validations as there was characters inside the input when onBlur was called (abcdef => would make 6 validations) and this was extremely costly with a Remote validation call. Update the code of Remote validation to also accept the "As" alias "remote:vm.customRemoteValidation". Finally added and updated a few Protractor tests to cover all of the above and more.
-1.3.28 (2015-06-04) Fixed a bug with ngDisabled not being interpreted before observing it (ng-disabled="vm.type == 1" would give false result because it was not being interpreted), added Protractor Test for this behavior in 2Forms page. Added `displayOnlyLastErrorMsg` in the list of Global Options. Cleaned up a lot of code.
+1.3.28 (2015-06-04) Fixed a bug with ngDisabled not being interpreted before observing it (ng-disabled="vm.type == 1" would give false result because it was not being interpreted), added Protractor Test for this behavior in 2Forms page. Added `displayOnlyLastErrorMsg` in the list of Global Options. Cleaned up a lot of code.
+1.3.29 (2015-06-10) Added RemoveValidator() for Directive, added Protractor tests on RemoveValidator() for both the Directive and Service. Fixed ngDisabled not working correctly in Service, added Protractor tests for ngDisabled On/Off in both Directive and Service

dist/angular-validation.min.js

@@ -24,7 +24,7 @@ <h4><strong>{{ 'ERRORS' | translate }}!</strong></h4>
 </div>
 
   <div class="form-actions">
-    <button type="submit" name="save_btn" class="btn btn-primary" ng-disabled="form01.$invalid">{{ 'SAVE' | translate }} (ngDisabled)</button>
+    <button type="submit" name="btn_ngDisabled" class="btn btn-primary" ng-disabled="form01.$invalid">{{ 'SAVE' | translate }} (ngDisabled)</button>
     <button type="submit" name="save_btn" class="btn btn-primary" ng-click="submitForm()">{{ 'SAVE' | translate }} (ngSubmit)</button>
   </div>
 </form>

full-tests/Directive.html

@@ -488,4 +488,9 @@ <h4><strong>{{ 'ERRORS' | translate }}!</strong></h4>
         <input class="form-control" type="text" name="input116" ng-model="input116">
     </div>
   </fieldset>
+
+  <div class="form-actions">
+    <button type="submit" name="btn_ngDisabled" class="btn btn-primary" ng-disabled="form01.$invalid">{{ 'SAVE' | translate }} (ngDisabled)</button>
+    <button type="submit" name="save_btn" class="btn btn-primary" ng-click="submitForm()">{{ 'SAVE' | translate }} (ngSubmit)</button>
+  </div>
 </form>

full-tests/Service.html

@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.3.28",
+  "version": "1.3.29",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": "app.js",

package.json

@@ -75,7 +75,7 @@
                 (function(elmInput, data, i) {
                   elmInput.clear().then(function() {
                     elmInput.sendKeys(data);
-                    //elmInput.sendKeys(protractor.Key.TAB);
+                    elmInput.sendKeys(protractor.Key.TAB);
                     var elmError = $('.validation-input' + i);
                     expect(elmError.getText()).toEqual('');
                   });
@@ -84,6 +84,11 @@
           }
         }, 420000);
 
+        it('Should check that ngDisabled button is now enabled', function() {
+          var elmSubmit1 = $('[name=btn_ngDisabled]');
+          expect(elmSubmit1.isEnabled()).toBe(true);
+        });
+
         it('Should enter invalid text and make error appear', function () {
           for (var i = 0, ln = validations.length; i < ln; i++) {
             var elmInput = $('[name=input' + i + ']');
@@ -96,7 +101,7 @@
                 (function(elmInput, data, i) {
                   elmInput.clear().then(function() {
                     elmInput.sendKeys(data);
-                    //elmInput.sendKeys(protractor.Key.TAB);
+                    elmInput.sendKeys(protractor.Key.TAB);
                     var elmError = $('.validation-input' + i);
                     expect(elmError.getText()).toEqual(validations[i].error_message[languages[0]]);
                   });

protractor/full_tests_spec.js

@@ -80,14 +80,15 @@
     'Change language',
     'May only contain letters, numbers, dashes and spaces. Must be at least 15 characters. Field is required.'
   ];
-  var errorMessages2FormsExtra = 'Field is required.';
+  var errorMessages2FormsExtra = 'May only contain letters, numbers and dashes. Must be at least 2 characters. Field is required.';
   var validInput2FormsTexts = [
     'John',
     'Doe',
     'abc',
     'en',
     'This is a great tool'
   ];
+  var input3error = 'May only contain a positive or negative float value (integer excluded). Needs to be a numeric value, between -0.6 and 99.5. Field is required.';
 
   for(var k = 0, kln = types.length; k < kln; k++) {
     // because we are dealing with promises, we better use closures to pass certain variables
@@ -173,7 +174,6 @@
               element(by.cssContainingText('option', 'en')).click(); // click on good option first
               element(by.cssContainingText('option', '...')).click(); // then click on option[0], the one containing '...'
               elmInput.sendKeys(protractor.Key.TAB);
-              //browser.sleep(5000); // sleep 5 seconds
 
               var elmError = $('.validation-select1');
               expect(elmError.getText()).toEqual(errorMessages[i]);
@@ -194,6 +194,7 @@
             var elmInput = $('[name=' + formElementNames[i] + ']');
             elmInput.click();
             elmInput.sendKeys(validInputTexts[i]);
+            elmInput.sendKeys(protractor.Key.TAB);
 
             if (formElementNames[i] === 'select1') {
               element(by.cssContainingText('option', validInputTexts[i])).click(); // click on good option
@@ -205,6 +206,135 @@
           }
         });
 
+        it('Should check that ngDisabled button is now enabled', function() {
+          var elmSubmit1 = $('[name=btn_ngDisabled]');
+          expect(elmSubmit1.isEnabled()).toBe(true);
+        });
+
+        it('Should make input3 error appear', function() {
+          // scroll back to top
+          browser.executeScript('window.scrollTo(0,0);').then(function () {
+            // make input3 invalid, remove text
+            var elmInput3 = $('[name=input3]');
+            clearInput(elmInput3);
+            elmInput3.sendKeys(protractor.Key.TAB);
+
+            // error should appear on input3
+            var elmError2 = $('.validation-input3');
+            expect(elmError2.getText()).toEqual(input3error);
+          });
+        });
+
+        it('Should show input3 error in ValidationSummary', function () {
+          var btnShowSummary = $('button[name=btn_showValidation]');
+          btnShowSummary.click();
+          browser.waitForAngular();
+
+          // showValidation checkbox should false at first but true after
+          var elmCheckboxShowSummary = element(by.model('displayValidationSummary'));
+          expect(elmCheckboxShowSummary.isSelected()).toBeTruthy();
+
+          // scroll back to top
+          browser.executeScript('window.scrollTo(0,0);').then(function () {
+            var itemRows = element.all(by.binding('message'));
+            var inputName;
+
+            for (var i = 0, j = 0, ln = itemRows.length; i < ln; i++) {
+              expect(itemRows.get(i).getText()).toEqual('input3: ' + input3error);
+            }
+          });
+        });
+
+        it('Should click on "Remove input3 validator" and error should go away from input & ValidationSummary', function() {
+          // scroll back to top
+          browser.executeScript('window.scrollTo(0,0);').then(function () {
+            var btnRemoveValidator2 = $('button[name=btn_RemoveValidator2]');
+            btnRemoveValidator2.click();
+            browser.waitForAngular();
+
+            // error should be removed from input3
+            var elmError2 = $('.validation-input3');
+            expect(elmError2.getText()).toEqual('');
+
+            // validation summary should become empty
+            var itemRows = element.all(by.binding('message'));
+            expect(itemRows.count()).toBe(0);
+          });
+        });
+
+        it('Should enter any text on input3 and stay without errors', function () {
+          // make input3 invalid, remove text
+          var elmInput3 = $('[name=input3]');
+          elmInput3.sendKeys('any text');
+          //elmInput3.sendKeys(protractor.Key.TAB);
+
+          // error should be removed from input3
+          var elmError3 = $('.validation-input3');
+          expect(elmError3.getText()).toEqual('');
+
+          // validation summary should become empty
+          var itemRows = element.all(by.binding('message'));
+          expect(itemRows.count()).toBe(0);
+        });
+
+        it('Should check that ngDisabled button is now enabled (after input3 check)', function() {
+          var elmSubmit1 = $('[name=btn_ngDisabled]');
+          expect(elmSubmit1.isEnabled()).toBe(true);
+        });
+
+        it('Should make input20 editable & error should appear', function() {
+          // click on the radio button OFF, that will make the input editable
+          element(by.id('radioDisableInput20_off')).click();
+          browser.waitForAngular();
+
+          // error should appear
+          var elmError = $('.validation-input20');
+          expect(elmError.getText()).toEqual(errorMessages2FormsExtra);
+
+          // Save button should become disable
+          var elmSubmit1 = $('[name=btn_ngDisabled]');
+          expect(elmSubmit1.isEnabled()).toBe(false);
+        });
+
+        it('Should show input20 error in ValidationSummary', function () {
+          var btnShowSummary = $('button[name=btn_showValidation]');
+          btnShowSummary.click();
+          browser.waitForAngular();
+
+          // showValidation checkbox should false at first but true after
+          var elmCheckboxShowSummary = element(by.model('displayValidationSummary'));
+          expect(elmCheckboxShowSummary.isSelected()).toBeTruthy();
+
+          // scroll back to top
+          browser.executeScript('window.scrollTo(0,0);').then(function () {
+            var itemRows = element.all(by.binding('message'));
+            var inputName;
+
+            for (var i = 0, j = 0, ln = itemRows.length; i < ln; i++) {
+              expect(itemRows.get(i).getText()).toEqual('input20: May only contain letters, numbers and dashes. Must be at least 2 characters. Field is required.');
+            }
+          });
+        });
+
+        it('Should disable input20, error go away from input & validation summary', function() {
+          // click on the radio button OFF, that will make the input editable
+          element(by.id('radioDisableInput20_on')).click();
+          browser.waitForAngular();
+
+          // error should appear
+          var elmError = $('.validation-input20');
+          expect(elmError.getText()).toEqual('');
+
+          // validation summary should become empty
+          var itemRows = element.all(by.binding('message'));
+          expect(itemRows.count()).toBe(0);
+        });
+
+        it('Should check that ngDisabled button is now enabled (after input20 check)', function() {
+          var elmSubmit1 = $('[name=btn_ngDisabled]');
+          expect(elmSubmit1.isEnabled()).toBe(true);
+        });
+
         it('Should reload english route, click on submit and display all error messages', function () {
           // scroll back to top if we want to be able to click on the English button
           browser.executeScript('window.scrollTo(0,0);').then(function () {
@@ -257,6 +387,7 @@
             }
           });
         });
+
       });         // Directive()
     })(types, k); // closure
   }               // for()
@@ -344,7 +475,7 @@
       expect(elmSubmit2.isEnabled()).toBe(true);
     });
 
-    it('Should make input4 editable & error should show on input4', function() {
+    it('Should make input4 editable & error should appear', function() {
       // click on the radio button OFF, that will make the input editable
       element(by.id('radioDisableInput4_off')).click();
 
@@ -397,5 +528,14 @@
       var elmSubmit2 = $('[name=save_btn2]');
       expect(elmSubmit2.isEnabled()).toBe(true);
     });
-  });
-});
+
+  }); // describe 2forms
+});   // describe Angular-Validation tests
+
+function clearInput(elem) {
+  elem.getAttribute('value').then(function (text) {
+    var len = text.length
+    var backspaceSeries = Array(len+1).join(protractor.Key.BACK_SPACE);
+    elem.sendKeys(backspaceSeries);
+  })
+}

protractor/mixed_validation_spec.js

@@ -1,5 +1,5 @@
 #Angular Validation (Directive / Service)
-`Version: 1.3.28`
+`Version: 1.3.29`
 ### Form validation after user inactivity of default 1sec. (customizable timeout)
 
 Forms Validation with Angular made easy! Angular-Validation is an angular directive/service with locales (languages) with a very simple approach of defining your `validation=""` directly within your element to validate (input, textarea, etc) and...that's it!!! The directive/service will take care of the rest!

readme.md

@@ -57,6 +57,7 @@ angular
     };
 
     // list of available published public functions of this object
+    validationCommon.prototype.arrayFindObject = arrayFindObject;                                   // search an object inside an array of objects
     validationCommon.prototype.defineValidation = defineValidation;                                 // define our validation object
     validationCommon.prototype.getFormElementByName = getFormElementByName;                         // get the form element custom object by it's name
     validationCommon.prototype.getFormElements = getFormElements;                                   // get the array of form elements (custom objects)
@@ -212,7 +213,8 @@ angular
      * @param string elmName: element name
      */
     function removeFromValidationSummary(elmName, validationSummaryObj) {
-      var form = getElementParentForm(elmName, this);                         // find the parent form (only found if it has a name)
+      var self = this;
+      var form = getElementParentForm(elmName, self);                         // find the parent form (only found if it has a name)
       var vsObj = (!!validationSummaryObj) ? validationSummaryObj : _validationSummary;
 
       var index = arrayFindObjectIndex(vsObj, 'field', elmName); // find index of object in our array
@@ -226,7 +228,7 @@ angular
         _validationSummary.splice(index, 1);
       }
 
-      this.scope.$validationSummary = _validationSummary;
+      self.scope.$validationSummary = _validationSummary;
 
       // and also save it inside the current scope form (if found)
       if (!!form) {
@@ -348,8 +350,8 @@ angular
       }
 
       // get some common variables
-      var elmName = (!!self.validatorAttrs && !!self.validatorAttrs.name)
-        ? self.validatorAttrs.name
+      var elmName = (!!self.ctrl && !!self.ctrl.$name)
+        ? self.ctrl.$name
         : (!!self.attrs && !!self.attrs.name)
           ? self.attrs.name
           : self.elm.attr('name');
@@ -627,8 +629,8 @@ angular
       }
 
       // get the element name, whichever we find it
-      var elmName = (!!self.validatorAttrs && !!self.validatorAttrs.name)
-        ? self.validatorAttrs.name
+      var elmName = (!!self.ctrl && !!self.ctrl.$name)
+        ? self.ctrl.$name
         : (!!self.attrs && !!self.attrs.name)
           ? self.attrs.name
           : self.elm.attr('name');