Enhancement #39 - How to Reset a Form

How to Reset a Form. You can see the Wiki link https://github.com/ghiscoding/angular-validation/wiki/Reset-Form
ghiscoding · Jun 21, 2015 · 6492a18 · 6492a18
1 parent 3d2a8c5
commit 6492a18
Show file tree

Hide file tree

Showing 18 changed files with 186 additions and 38 deletions.
diff --git a/app.js b/app.js
@@ -45,7 +45,9 @@ myApp.controller('CtrlValidationDirective', ['$q', '$scope', 'validationService'
   $scope.removeInputValidator = function ( elmName ) {
     new validationService().removeValidator($scope.form1, elmName);
   };
-
+  $scope.resetForm = function() {
+    new validationService().resetForm($scope.form1);
+  };
   $scope.submitForm = function() {
     if(new validationService().checkFormValidity($scope.form1)) {
       alert('All good, proceed with submit...');
@@ -83,6 +85,9 @@ myApp.controller('Ctrl2forms', ['$scope', 'validationService', function ($scope,
       alert('All good, proceed with submit...');
     }
   }
+  $scope.resetForm = function(form) {
+    new validationService().resetForm(form, { emptyAllInputValues: true, removeAllValidators: true });
+  };
   $scope.showValidationSummary = function () {
     $scope.displayValidationSummary = true;
   }
@@ -142,7 +147,9 @@ myApp.controller('CtrlValidationService', ['$q', '$scope', '$translate', 'valida
   $scope.removeInputValidator = function ( elmName ) {
     myValidation.removeValidator($scope.form1, elmName);
   };
-
+  $scope.resetForm = function() {
+    myValidation.resetForm($scope.form1);
+  };
   $scope.showValidationSummary = function () {
     $scope.displayValidationSummary = true;
   }

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.3.29",
+  "version": "1.3.31",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": [

diff --git a/dist/angular-validation.min.js b/dist/angular-validation.min.js
diff --git a/locales/validation/en.json b/locales/validation/en.json
@@ -78,6 +78,7 @@
     "INPUT19":                          "Date US SHORT (mm/dd/yy) -- between the dates 12/01/99 and 12/31/15",
     "FIRST_NAME":                       "First Name",
     "LAST_NAME":                        "Last Name",
+    "RESET_FORM":                       "Reset Form",
     "SAVE":                             "Save",
     "SELECT1":                          "Required (select) -- validation with (blur) EVENT",
     "SHOW_VALIDATION_SUMMARY":          "Show Validation Summary"

diff --git a/locales/validation/es.json b/locales/validation/es.json
@@ -78,6 +78,7 @@
     "INPUT19":                          "Fecha formato US corto (mm/dd/yy) -- entre las fechas 12/01/99 and 12/31/15",
     "FIRST_NAME":                       "Nombre",
     "LAST_NAME":                        "Apellido",
+    "RESET_FORM":                       "Cambiar la Forma",
     "SAVE":                             "Guardar",
     "SELECT1":                          "Requerido (select) -- validación con (blur) EVENT",
     "SHOW_VALIDATION_SUMMARY":          "Mostar el resumén de validación"

diff --git a/locales/validation/fr.json b/locales/validation/fr.json
@@ -78,6 +78,7 @@
     "INPUT19":                          "Date US COURT (mm/dd/yy) -- entre les dates 12/01/99 et 12/31/15",
     "FIRST_NAME":                       "Prénom",
     "LAST_NAME":                        "Nom de Famille",
+    "RESET_FORM":                       "Réinitialisation le formulaire",
     "SAVE":                             "Sauvegarder",
     "SELECT1":                          "Requis (select) -- validation avec EVENT (blur)",
     "SHOW_VALIDATION_SUMMARY":          "Afficher le Résumé de Validation"

diff --git a/locales/validation/no.json b/locales/validation/no.json
@@ -78,6 +78,7 @@
     "INPUT19":                          "US SHORT dato (mm/dd/yy) -- mellom 12/01/99 og 12/31/15",
     "FIRST_NAME":                       "Fornavn",
     "LAST_NAME":                        "Etternavn",
+    "RESET_FORM":                       "Nullstill skjemaet",
     "SAVE":                             "Lagre",
     "SELECT1":                          "Påkrevd (select) -- validering med (blur) EVENT",
     "SHOW_VALIDATION_SUMMARY":          "Vis Valideringsoppsummering"

diff --git a/locales/validation/pl.json b/locales/validation/pl.json
@@ -78,6 +78,7 @@
     "INPUT19":                          "Data w formacie US SHORT (mm/dd/rr) -- pomiędzy datami 12/01/99 a 12/31/15",
     "FIRST_NAME":                       "Imię",
     "LAST_NAME":                        "Nazwisko",
+    "RESET_FORM":                       "Zresetować formularz",
     "SAVE":                             "Zapisz",
     "SELECT1":                          "Wymagane (wybierz) -- walidacja z zdarzeniem (blur)",
     "SHOW_VALIDATION_SUMMARY":          "Pokaż podsumowanie walidacji"

diff --git a/locales/validation/ru.json b/locales/validation/ru.json
@@ -78,6 +78,7 @@
   "INPUT19":                          "Дата US SHORT (mm/dd/yy) --между датами 12/01/99 и 12/31/15",
   "FIRST_NAME":                       "Имя",
   "LAST_NAME":                        "Фамилия",
+  "RESET_FORM":                       "Сброс форму",
   "SAVE":                             "Сохранить",
   "SELECT1":                          "Обязательное (select) -- проверка по СОБЫТИЮ (blur)",
   "SHOW_VALIDATION_SUMMARY":          "Показать результаты проверки значений"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-validation-ghiscoding",
-  "version": "1.3.29",
+  "version": "1.3.31",
   "author": "Ghislain B.",
   "description": "Angular-Validation Directive and Service (ghiscoding)",
   "main": "app.js",

diff --git a/protractor/mixed_validation_spec.js b/protractor/mixed_validation_spec.js
@@ -99,9 +99,6 @@
 
           // Find the title element
           var titleElement = element(by.css('h1'));
-
-          // Assert that the text element has the expected value.
-          // Protractor patches 'expect' to understand promises.
           expect(titleElement.getText()).toEqual('Angular-Validation Directive|Service (ghiscoding)');
         });
 
@@ -114,9 +111,6 @@
 
           // Find the sub-title element
           var titleElement = element(by.css('h3'));
-
-          // Assert that the text element has the expected value.
-          // Protractor patches 'expect' to understand promises.
           expect(titleElement.getText()).toEqual(types[k]);
         });
 
@@ -226,7 +220,7 @@
         });
 
         it('Should show input3 error in ValidationSummary', function () {
-          var btnShowSummary = $('button[name=btn_showValidation]');
+          var btnShowSummary = $('[name=btn_showValidation]');
           btnShowSummary.click();
           browser.waitForAngular();
 
@@ -297,7 +291,7 @@
         });
 
         it('Should show input20 error in ValidationSummary', function () {
-          var btnShowSummary = $('button[name=btn_showValidation]');
+          var btnShowSummary = $('[name=btn_showValidation]');
           btnShowSummary.click();
           browser.waitForAngular();
 
@@ -357,16 +351,47 @@
           });
         });
 
-        it('Should show ValidationSummary and contain all error messages', function () {
+        it('Should click on ResetForm button and all errors should be gone', function() {
+          var btnResetForm = $('[name=btn_resetForm]');
+          btnResetForm.click();
+          browser.waitForAngular();
+
+          // loop through all form element and make sure there is no more errors
+          for (var i = 0, ln = formElementNames.length; i < ln; i++) {
+            // some fields are not required or disabled so no error will show up, continue to next ones
+            if (formElementNames[i] === 'input12' || formElementNames[i] === 'input14') {
+              continue;
+            }
+            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
+              elmInput.sendKeys(protractor.Key.TAB);
+            }
+
+            var elmError = $('.validation-' + formElementNames[i]);
+            expect(elmError.getText()).toEqual('');
+          }
+        });
+
+        it('Should check that ngDisabled button is now enabled (after input20 check)', function() {
+          var elmSubmit1 = $('[name=btn_ngDisabled]');
+          expect(elmSubmit1.isEnabled()).toBe(false);
+        });
+
+        it('Should reload english route & show ValidationSummary should contain all error messages', function () {
           var elmBtnEnglish = $('button[name=btn_english]');
           elmBtnEnglish.click();
           browser.waitForAngular();
 
-          // showValidation checkbox should false at first but true after
+          // showValidation checkbox should be false at first but true after we clicked on it
           var elmCheckboxShowSummary = element(by.model('displayValidationSummary'));
           expect(elmCheckboxShowSummary.isSelected()).toBeFalsy();
 
-          var btnShowSummary = $('button[name=btn_showValidation]');
+          var btnShowSummary = $('[name=btn_showValidation]');
           btnShowSummary.click();
           browser.waitForAngular();
 
@@ -398,9 +423,6 @@
 
       // Find the title element
       var titleElement = element(by.css('h1'));
-
-      // Assert that the text element has the expected value.
-      // Protractor patches 'expect' to understand promises.
       expect(titleElement.getText()).toEqual('Angular-Validation Directive|Service (ghiscoding)');
     });
 
@@ -413,9 +435,6 @@
 
       // Find the sub-title element
       var titleElement = element(by.css('h3'));
-
-      // Assert that the text element has the expected value.
-      // Protractor patches 'expect' to understand promises.
       expect(titleElement.getText()).toEqual('Directive - 2 Forms');
     });
 
@@ -424,7 +443,7 @@
       var elmCheckboxShowSummary = element(by.model('displayValidationSummary'));
       expect(elmCheckboxShowSummary.isSelected()).toBeFalsy();
 
-      var btnShowSummary = $('button[name=btn_showValidation]');
+      var btnShowSummary = $('[name=btn_showValidation]');
       btnShowSummary.click();
       browser.waitForAngular();
 
@@ -489,7 +508,7 @@
     });
 
     it('Should show input4 error in ValidationSummary', function () {
-      var btnShowSummary = $('button[name=btn_showValidation]');
+      var btnShowSummary = $('[name=btn_showValidation]');
       btnShowSummary.click();
       browser.waitForAngular();
 
@@ -529,6 +548,51 @@
       expect(elmSubmit2.isEnabled()).toBe(true);
     });
 
+    it('Should reload english route, and enter invalid text on inputs', function() {
+      var elmBtnEnglish = $('button[name=btn_english]');
+      elmBtnEnglish.click();
+      browser.waitForAngular();
+
+      // just enter letter "a" on first 2 inputs to make them invalid
+      var ln = 2;
+      for (var i = 0; i < ln; i++) {
+        var elmInput = $('[name=' + formElement2FormsNames[i] + ']');
+        elmInput.click();
+        elmInput.sendKeys("a");
+        elmInput.sendKeys(protractor.Key.TAB);
+
+        // both inputs should have the same error message
+        var elmError = $('.validation-' + formElement2FormsNames[i]);
+        expect(elmError.getText()).toEqual('Must be at least 2 characters.');
+      }
+    });
+
+    it('Should check that first submit button is disabled', function() {
+      var elmSubmit1 = $('[name=save_btn1]');
+      expect(elmSubmit1.isEnabled()).toBe(false);
+    });
+
+    it('Should click on ResetForm button, then error should be gone and input value now being empty', function() {
+      var btnResetForm = $('[name=btn_resetForm]');
+      btnResetForm.click();
+      browser.waitForAngular();
+
+      // just loop on first 2 inputs and make sure they are now empty input values and empty error message
+      var ln = 2;
+      for (var i = 0; i < ln; i++) {
+        var elmInput = $('[name=' + formElement2FormsNames[i] + ']');
+        expect(elmInput.getAttribute('value')).toEqual('');
+
+        var elmError = $('.validation-' + formElement2FormsNames[i]);
+        expect(elmError.getText()).toEqual('');
+      }
+    });
+
+    it('Should check that first submit button is now enabled', function() {
+      var elmSubmit1 = $('[name=save_btn1]');
+      expect(elmSubmit1.isEnabled()).toBe(true);
+    });
+
   }); // describe 2forms
 });   // describe Angular-Validation tests
 

diff --git a/readme.md b/readme.md
@@ -1,5 +1,5 @@
 #Angular Validation (Directive / Service)
-`Version: 1.3.29`
+`Version: 1.3.31`
 ### 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!

diff --git a/src/validation-common.js b/src/validation-common.js
@@ -157,7 +157,10 @@ angular
     /** Return all Form elements
      * @return array object elements
      */
-    function getFormElements() {
+    function getFormElements(formName) {
+      if(!!formName) {
+        return arrayFindObjects(_formElements, 'formName', formName);
+      }
       return _formElements;
     }
 
@@ -570,8 +573,9 @@ angular
      */
     function addToFormElementObjectList(elm, attrs, ctrl, scope) {
       var elmName = (!!attrs.name) ? attrs.name : elm.attr('name');
+      var form = getElementParentForm(elmName, { scope: scope });                         // find the parent form (only found if it has a name)
       var friendlyName = (!!attrs && !!attrs.friendlyName) ? $translate.instant(attrs.friendlyName) : '';
-      var formElm = { fieldName: elmName, friendlyName: friendlyName, elm: elm, attrs: attrs, ctrl: ctrl, scope: scope, isValid: false, message: '' };
+      var formElm = { fieldName: elmName, friendlyName: friendlyName, elm: elm, attrs: attrs, ctrl: ctrl, scope: scope, isValid: false, message: '', formName: (!!form) ? form.$name : null };
       var index = arrayFindObjectIndex(_formElements, 'fieldName', elm.attr('name')); // find index of object in our array
       if (index >= 0) {
         _formElements[index] = formElm;

diff --git a/src/validation-directive.js b/src/validation-directive.js
@@ -116,7 +116,7 @@
           if(!commonObj.isFieldRequired() && (value === "" || value === null || typeof value === "undefined")) {
             cancelValidation();
             return value;
-          }else {
+          }else if(!!formElmObj) {
             formElmObj.isValidationCancelled = false;
           }