From 546ffaf30e289d8f829ea2cf1a15f63401010b05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Wed, 3 Sep 2014 15:12:47 -0400 Subject: [PATCH] fix(ngModel): consider ngMin/ngMax values when validating number input 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. --- src/jqLite.js | 2 + src/ng/directive/input.js | 4 +- test/ng/directive/inputSpec.js | 82 ++++++++++++++++++++++++++++++++++ 3 files changed, 86 insertions(+), 2 deletions(-) diff --git a/src/jqLite.js b/src/jqLite.js index 73b76f930739..61955850178d 100644 --- 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 index 48e218f51e5b..9ad168927fb1 100644 --- 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 index 3bcf7a781edf..48f4b9bd153c 100644 --- 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(''); + + 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(''); + + 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(''); + + 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(''); + + 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() {