fix(ngModel): revalidate the model when min/max expression values cha…

…nge for number inputs As of this fix if the max or min value is changed via scope or by another ngModel then it will trigger the model containing the min/max attributes to revalidate itself. Closes angular#2404
matsko · Sep 3, 2014 · a707a81 · a707a81
1 parent b474c36
commit a707a81
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 14 deletions.
diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js
@@ -1129,15 +1129,35 @@ function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   });
 
   if (attr.min) {
+    var minVal;
     ctrl.$validators.min = function(value) {
-      return ctrl.$isEmpty(value) || isUndefined(attr.min) || value >= parseFloat(attr.min);
+      return ctrl.$isEmpty(value) || isUndefined(minVal) || value >= minVal;
     };
+
+    attr.$observe('min', function(val) {
+      if (isDefined(val) && !isNumber(val)) {
+        val = parseFloat(val, 10);
+      }
+      minVal = isNumber(val) && !isNaN(val) ? val : undefined;
+      // TODO(matsko): implement validateLater to reduce number of validations
+      ctrl.$validate();
+    });
   }
 
   if (attr.max) {
+    var maxVal;
     ctrl.$validators.max = function(value) {
-      return ctrl.$isEmpty(value) || isUndefined(attr.max) || value <= parseFloat(attr.max);
+      return ctrl.$isEmpty(value) || isUndefined(maxVal) || value <= maxVal;
     };
+
+    attr.$observe('max', function(val) {
+      if (isDefined(val) && !isNumber(val)) {
+        val = parseFloat(val, 10);
+      }
+      maxVal = isNumber(val) && !isNaN(val) ? val : undefined;
+      // TODO(matsko): implement validateLater to reduce number of validations
+      ctrl.$validate();
+    });
   }
 }
 

diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js
@@ -2894,18 +2894,28 @@ describe('input', function() {
         expect(scope.form.alias.$error.min).toBeFalsy();
       });
 
-      it('should validate even if min value changes on-the-fly', function(done) {
+      it('should validate even if min value changes on-the-fly', function() {
         scope.min = 10;
         compileInput('<input type="number" ng-model="value" name="alias" min="{{min}}" />');
 
-        changeInputValueTo('5');
+        changeInputValueTo('15');
+        expect(inputElm).toBeValid();
+
+        scope.min = 20;
+        scope.$digest();
         expect(inputElm).toBeInvalid();
 
-        scope.min = 0;
-        scope.$digest(function () {
-          expect(inputElm).toBeValid();
-          done();
-        });
+        scope.min = null;
+        scope.$digest();
+        expect(inputElm).toBeValid();
+
+        scope.min = '20';
+        scope.$digest();
+        expect(inputElm).toBeInvalid();
+
+        scope.min = 'abc';
+        scope.$digest();
+        expect(inputElm).toBeValid();
       });
     });
 
@@ -2926,18 +2936,28 @@ describe('input', function() {
         expect(scope.form.alias.$error.max).toBeFalsy();
       });
 
-      it('should validate even if max value changes on-the-fly', function(done) {
+      it('should validate even if max value changes on-the-fly', function() {
         scope.max = 10;
         compileInput('<input type="number" ng-model="value" name="alias" max="{{max}}" />');
 
         changeInputValueTo('5');
         expect(inputElm).toBeValid();
 
         scope.max = 0;
-        scope.$digest(function () {
-          expect(inputElm).toBeInvalid();
-          done();
-        });
+        scope.$digest();
+        expect(inputElm).toBeInvalid();
+
+        scope.max = null;
+        scope.$digest();
+        expect(inputElm).toBeValid();
+
+        scope.max = '4';
+        scope.$digest();
+        expect(inputElm).toBeInvalid();
+
+        scope.max = 'abc';
+        scope.$digest();
+        expect(inputElm).toBeValid();
       });
     });