Fixed issue with validtor and ng-if

Jakobovski · Jul 12, 2015 · 226fd52 · 226fd52
1 parent 9b67aa5
commit 226fd52
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 34 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "tg-angular-validator",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "authors": [
     "Zohar Jackson <[email protected]>"
   ],

diff --git a/demo/index.html b/demo/index.html
@@ -2,21 +2,16 @@
 <head>
     <title>Angular-Validator Demo</title>
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
- <style>
-        h4 {
-            color:  rgb(255, 128, 0);
-        }
+    <style>
+        h4 {color:  rgb(255, 128, 0);}
     </style>
-
-
-    </head>
+</head>
 
 <body ng-controller="DemoCtrl">
     <div class="container">
         <h1>Angular-Validator Demo</h1>
         <a href="https://github.com/turinggroup/angular-validator">https://github.com/turinggroup/angular-validator</a>
         <hr>
-
         <form angular-validator-submit="submitMyForm()" name="myForm" class="form-horizontal" novalidate angular-validator>
             <h4>Choose when to validate:</h4>
             <div class="form-group">

diff --git a/dist/angular-validator.js b/dist/angular-validator.js
@@ -9,17 +9,22 @@ angular.module('angularValidator').directive('angularValidator',
                 // This is the DOM form element
                 var DOMForm = angular.element(element)[0];
 
+                // an array to store all the watches for form elements
+                var watches = [];
+
                 // This is the the scope form model
                 // All validation states are contained here
                 var form_name = DOMForm.attributes['name'].value;
                 var scopeForm = scope[form_name];
 
                 // Set the default submitted state to false
                 scopeForm.submitted = false;
-
 
                 // Watch form length to add watches for new form elements
-                scope.$watch(function(){return DOMForm.length;}, function(){
+                scope.$watch(function(){return Object.keys(scopeForm).length;}, function(){
+                    // Destroy all the watches
+                    // This is cleaner than figuring out which items are already being watched and only un-watching those.
+                    angular.forEach(watches, function(watch){watch();});
                     setupWatches(DOMForm);
                 });
 
@@ -48,13 +53,11 @@ angular.module('angularValidator').directive('angularValidator',
                             scopeForm[DOMForm[i].name].$render();
                         }
                     }
-
                     scopeForm.submitted = false;
                     scopeForm.$setPristine();
                 };
 
 
-
                 // Setup watches on all form fields 
                 setupWatches(DOMForm);
 
@@ -72,13 +75,6 @@ angular.module('angularValidator').directive('angularValidator',
 
                 // Setup $watch on a single formfield
                 function setupWatch(elementToWatch) {
-
-                    if (elementToWatch.isWatchedByValidator){
-                        return;
-                    }
-
-                    elementToWatch.isWatchedByValidator = true;
-
                     // If element is set to validate on blur then update the element on blur
                     if ("validate-on" in elementToWatch.attributes && elementToWatch.attributes["validate-on"].value === "blur") {
                         angular.element(elementToWatch).on('blur', function() {
@@ -87,7 +83,7 @@ angular.module('angularValidator').directive('angularValidator',
                         });
                     }
 
-                    scope.$watch(function() {
+                    var watch = scope.$watch(function() {
                             return elementToWatch.value + elementToWatch.required + scopeForm.submitted + checkElementValidity(elementToWatch) + getDirtyValue(scopeForm[elementToWatch.name]) + getValidValue(scopeForm[elementToWatch.name]);
                         },
                         function() {
@@ -112,6 +108,8 @@ angular.module('angularValidator').directive('angularValidator',
                             }
 
                         });
+
+                    watches.push(watch);
                 }
 
 

diff --git a/dist/angular-validator.min.js b/dist/angular-validator.min.js
diff --git a/src/angular-validator.js b/src/angular-validator.js
@@ -9,17 +9,22 @@ angular.module('angularValidator').directive('angularValidator',
                 // This is the DOM form element
                 var DOMForm = angular.element(element)[0];
 
+                // an array to store all the watches for form elements
+                var watches = [];
+
                 // This is the the scope form model
                 // All validation states are contained here
                 var form_name = DOMForm.attributes['name'].value;
                 var scopeForm = scope[form_name];
 
                 // Set the default submitted state to false
                 scopeForm.submitted = false;
-
 
                 // Watch form length to add watches for new form elements
-                scope.$watch(function(){return DOMForm.length;}, function(){
+                scope.$watch(function(){return Object.keys(scopeForm).length;}, function(){
+                    // Destroy all the watches
+                    // This is cleaner than figuring out which items are already being watched and only un-watching those.
+                    angular.forEach(watches, function(watch){watch();});
                     setupWatches(DOMForm);
                 });
 
@@ -48,13 +53,11 @@ angular.module('angularValidator').directive('angularValidator',
                             scopeForm[DOMForm[i].name].$render();
                         }
                     }
-
                     scopeForm.submitted = false;
                     scopeForm.$setPristine();
                 };
 
 
-
                 // Setup watches on all form fields 
                 setupWatches(DOMForm);
 
@@ -72,13 +75,6 @@ angular.module('angularValidator').directive('angularValidator',
 
                 // Setup $watch on a single formfield
                 function setupWatch(elementToWatch) {
-
-                    if (elementToWatch.isWatchedByValidator){
-                        return;
-                    }
-
-                    elementToWatch.isWatchedByValidator = true;
-
                     // If element is set to validate on blur then update the element on blur
                     if ("validate-on" in elementToWatch.attributes && elementToWatch.attributes["validate-on"].value === "blur") {
                         angular.element(elementToWatch).on('blur', function() {
@@ -87,7 +83,7 @@ angular.module('angularValidator').directive('angularValidator',
                         });
                     }
 
-                    scope.$watch(function() {
+                    var watch = scope.$watch(function() {
                             return elementToWatch.value + elementToWatch.required + scopeForm.submitted + checkElementValidity(elementToWatch) + getDirtyValue(scopeForm[elementToWatch.name]) + getValidValue(scopeForm[elementToWatch.name]);
                         },
                         function() {
@@ -112,6 +108,8 @@ angular.module('angularValidator').directive('angularValidator',
                             }
 
                         });
+
+                    watches.push(watch);
                 }