fix(ngModel): consider ngMin/ngMax values when validating number inpu…

…t types With this fix ngModel will treat ngMin as a min error and ngMax as a max error. This also means that when either of these two values is changed then ngModel will revaliate itself.
Narretz · Sep 4, 2014 · 25541c1 · 25541c1
1 parent 7b273a2
commit 25541c1
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 2 deletions.
diff --git a/src/jqLite.js b/src/jqLite.js
@@ -506,6 +506,8 @@ forEach('input,select,option,textarea,button,form,details'.split(','), function(
 var ALIASED_ATTR = {
   'ngMinlength' : 'minlength',
   'ngMaxlength' : 'maxlength',
+  'ngMin' : 'min',
+  'ngMax' : 'max',
   'ngPattern' : 'pattern'
 };
 

diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js
@@ -1128,7 +1128,7 @@ function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
     return value;
   });
 
-  if (attr.min) {
+  if (attr.min || attr.ngMin) {
     var minVal;
     ctrl.$validators.min = function(value) {
       return ctrl.$isEmpty(value) || isUndefined(minVal) || value >= minVal;
@@ -1144,7 +1144,7 @@ function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
     });
   }
 
-  if (attr.max) {
+  if (attr.max || attr.ngMax) {
     var maxVal;
     ctrl.$validators.max = function(value) {
       return ctrl.$isEmpty(value) || isUndefined(maxVal) || value <= maxVal;

diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js
@@ -2919,6 +2919,47 @@ describe('input', function() {
       });
     });
 
+    describe('ngMin', function() {
+
+      it('should validate', function() {
+        compileInput('<input type="number" ng-model="value" name="alias" ng-min="50" />');
+
+        changeInputValueTo('1');
+        expect(inputElm).toBeInvalid();
+        expect(scope.value).toBeFalsy();
+        expect(scope.form.alias.$error.min).toBeTruthy();
+
+        changeInputValueTo('100');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(100);
+        expect(scope.form.alias.$error.min).toBeFalsy();
+      });
+
+      it('should validate even if the ngMin value changes on-the-fly', function() {
+        scope.min = 10;
+        compileInput('<input type="number" ng-model="value" name="alias" ng-min="min" />');
+
+        changeInputValueTo('15');
+        expect(inputElm).toBeValid();
+
+        scope.min = 20;
+        scope.$digest();
+        expect(inputElm).toBeInvalid();
+
+        scope.min = null;
+        scope.$digest();
+        expect(inputElm).toBeValid();
+
+        scope.min = '20';
+        scope.$digest();
+        expect(inputElm).toBeInvalid();
+
+        scope.min = 'abc';
+        scope.$digest();
+        expect(inputElm).toBeValid();
+      });
+    });
+
 
     describe('max', function() {
 
@@ -2961,6 +3002,47 @@ describe('input', function() {
       });
     });
 
+    describe('ngMax', function() {
+
+      it('should validate', function() {
+        compileInput('<input type="number" ng-model="value" name="alias" ng-max="5" />');
+
+        changeInputValueTo('20');
+        expect(inputElm).toBeInvalid();
+        expect(scope.value).toBeUndefined();
+        expect(scope.form.alias.$error.max).toBeTruthy();
+
+        changeInputValueTo('0');
+        expect(inputElm).toBeValid();
+        expect(scope.value).toBe(0);
+        expect(scope.form.alias.$error.max).toBeFalsy();
+      });
+
+      it('should validate even if the ngMax value changes on-the-fly', function() {
+        scope.max = 10;
+        compileInput('<input type="number" ng-model="value" name="alias" ng-max="max" />');
+
+        changeInputValueTo('5');
+        expect(inputElm).toBeValid();
+
+        scope.max = 0;
+        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();
+      });
+    });
+
 
     describe('required', function() {