fix(input[number]): validate min/max against viewValue

This brings the validation in line with HTML5 validation and all other validators. Fixes #12761 BREAKING CHANGE ...
angular · Nov 10, 2017 · 0a3ddfc · 0a3ddfc
1 parent 181ac0b
commit 0a3ddfc
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 4 deletions.
diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js
@@ -1604,8 +1604,8 @@ function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   var maxVal;
 
   if (isDefined(attr.min) || attr.ngMin) {
-    ctrl.$validators.min = function(value) {
-      return ctrl.$isEmpty(value) || isUndefined(minVal) || value >= minVal;
+    ctrl.$validators.min = function(modelValue, viewValue) {
+      return ctrl.$isEmpty(viewValue) || isUndefined(minVal) || viewValue >= minVal;
     };
 
     attr.$observe('min', function(val) {
@@ -1616,8 +1616,8 @@ function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   }
 
   if (isDefined(attr.max) || attr.ngMax) {
-    ctrl.$validators.max = function(value) {
-      return ctrl.$isEmpty(value) || isUndefined(maxVal) || value <= maxVal;
+    ctrl.$validators.max = function(modelValue, viewValue) {
+      return ctrl.$isEmpty(viewValue) || isUndefined(maxVal) || viewValue <= maxVal;
     };
 
     attr.$observe('max', function(val) {

diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js
@@ -2465,6 +2465,21 @@ describe('input', function() {
         expect($rootScope.form.alias.$error.min).toBeFalsy();
       });
 
+
+      it('should validate against the viewValue', function() {
+        var inputElm = helper.compileInput('<input type="number" num-parse ng-model="value" name="alias" min="10" />');
+        var ngModelCtrl = inputElm.controller('ngModel');
+        ngModelCtrl.$parsers.push(function(value) {
+          return value - 5;
+        });
+
+        helper.changeInputValueTo('10');
+        expect(inputElm).toBeValid();
+        expect($rootScope.value).toBe(5);
+        expect($rootScope.form.alias.$error.min).toBeFalsy();
+      });
+
+
       it('should validate even if min value changes on-the-fly', function() {
         $rootScope.min = undefined;
         var inputElm = helper.compileInput('<input type="number" ng-model="value" name="alias" min="{{min}}" />');
@@ -2511,6 +2526,21 @@ describe('input', function() {
         expect($rootScope.form.alias.$error.min).toBeFalsy();
       });
 
+
+      it('should validate against the viewValue', function() {
+        var inputElm = helper.compileInput('<input type="number" num-parse ng-model="value" name="alias" ng-min="10" />');
+        var ngModelCtrl = inputElm.controller('ngModel');
+        ngModelCtrl.$parsers.push(function(value) {
+          return value - 5;
+        });
+
+        helper.changeInputValueTo('10');
+        expect(inputElm).toBeValid();
+        expect($rootScope.value).toBe(5);
+        expect($rootScope.form.alias.$error.min).toBeFalsy();
+      });
+
+
       it('should validate even if the ngMin value changes on-the-fly', function() {
         $rootScope.min = undefined;
         var inputElm = helper.compileInput('<input type="number" ng-model="value" name="alias" ng-min="min" />');
@@ -2558,6 +2588,22 @@ describe('input', function() {
         expect($rootScope.form.alias.$error.max).toBeFalsy();
       });
 
+
+      it('should validate against the viewValue', function() {
+        var inputElm = helper.compileInput('<input type="number"' +
+          'num-parse ng-model="value" name="alias" max="10" />');
+        var ngModelCtrl = inputElm.controller('ngModel');
+        ngModelCtrl.$parsers.push(function(value) {
+          return value + 5;
+        });
+
+        helper.changeInputValueTo('9');
+        expect(inputElm).toBeValid();
+        expect($rootScope.value).toBe(14);
+        expect($rootScope.form.alias.$error.max).toBeFalsy();
+      });
+
+
       it('should validate even if max value changes on-the-fly', function() {
         $rootScope.max = undefined;
         var inputElm = helper.compileInput('<input type="number" ng-model="value" name="alias" max="{{max}}" />');
@@ -2604,6 +2650,22 @@ describe('input', function() {
         expect($rootScope.form.alias.$error.max).toBeFalsy();
       });
 
+
+      it('should validate against the viewValue', function() {
+        var inputElm = helper.compileInput('<input type="number"' +
+          'num-parse ng-model="value" name="alias" ng-max="10" />');
+        var ngModelCtrl = inputElm.controller('ngModel');
+        ngModelCtrl.$parsers.push(function(value) {
+          return value + 5;
+        });
+
+        helper.changeInputValueTo('9');
+        expect(inputElm).toBeValid();
+        expect($rootScope.value).toBe(14);
+        expect($rootScope.form.alias.$error.max).toBeFalsy();
+      });
+
+
       it('should validate even if the ngMax value changes on-the-fly', function() {
         $rootScope.max = undefined;
         var inputElm = helper.compileInput('<input type="number" ng-model="value" name="alias" ng-max="max" />');