From d63354abc2bb955eb9a52693b3559f37ad9b2f32 Mon Sep 17 00:00:00 2001 From: Florian Orben Date: Sat, 17 Nov 2012 01:51:57 +0100 Subject: [PATCH] feat(input): make expressions work for ng-Maxlenth and ng-Minlength ng-minlength and ng-maxlength attributes do not accept expressions as input parameter. Make it work as intended. Fix based on #1077. Closes #1405 --- src/ng/directive/input.js | 75 +++++++++++++++------------------- test/ng/directive/inputSpec.js | 42 ++++++++++++++++++- 2 files changed, 73 insertions(+), 44 deletions(-) mode change 100644 => 100755 src/ng/directive/input.js mode change 100644 => 100755 test/ng/directive/inputSpec.js diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js old mode 100644 new mode 100755 index aba5ff1addac..46f86936e087 --- a/src/ng/directive/input.js +++ b/src/ng/directive/input.js @@ -16,9 +16,9 @@ var inputType = { * @param {string} ngModel Assignable angular expression to data-bind to. * @param {string=} name Property name of the form under which the control is published. * @param {string=} required Sets `required` validation error key if the value is not entered. - * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than + * @param {expression=} ngMinlength Sets `minlength` validation error key if the value is shorter than * minlength. - * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than + * @param {expression=} ngMaxlength Sets `maxlength` validation error key if the value is longer than * maxlength. * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for @@ -93,9 +93,9 @@ var inputType = { * @param {string=} min Sets the `min` validation error key if the value entered is less then `min`. * @param {string=} max Sets the `max` validation error key if the value entered is greater then `min`. * @param {string=} required Sets `required` validation error key if the value is not entered. - * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than + * @param {expression=} ngMinlength Sets `minlength` validation error key if the value is shorter than * minlength. - * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than + * @param {expression=} ngMaxlength Sets `maxlength` validation error key if the value is longer than * maxlength. * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for @@ -159,9 +159,9 @@ var inputType = { * @param {string} ngModel Assignable angular expression to data-bind to. * @param {string=} name Property name of the form under which the control is published. * @param {string=} required Sets `required` validation error key if the value is not entered. - * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than + * @param {expression=} ngMinlength Sets `minlength` validation error key if the value is shorter than * minlength. - * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than + * @param {expression=} ngMaxlength Sets `maxlength` validation error key if the value is longer than * maxlength. * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for @@ -224,9 +224,9 @@ var inputType = { * @param {string} ngModel Assignable angular expression to data-bind to. * @param {string=} name Property name of the form under which the control is published. * @param {string=} required Sets `required` validation error key if the value is not entered. - * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than + * @param {expression=} ngMinlength Sets `minlength` validation error key if the value is shorter than * minlength. - * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than + * @param {expression=} ngMaxlength Sets `maxlength` validation error key if the value is longer than * maxlength. * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for @@ -460,39 +460,30 @@ function textInputType(scope, element, attr, ctrl, $sniffer, $browser) { ctrl.$parsers.push(patternValidator); } - // min length validator - if (attr.ngMinlength) { - var minlength = int(attr.ngMinlength); - var minLengthValidator = function(value) { - if (!isEmpty(value) && value.length < minlength) { - ctrl.$setValidity('minlength', false); - return undefined; - } else { - ctrl.$setValidity('minlength', true); - return value; - } - }; - - ctrl.$parsers.push(minLengthValidator); - ctrl.$formatters.push(minLengthValidator); - } + function applyMinMaxLength(minOrMax, langthInvalid) { + if (attr.hasOwnProperty(minOrMax)) { + var validityValue = minOrMax === 'ngMinlength' ? 'minlength' : 'maxlength'; + var validator = function(value) { + var parsedValue = parseFloat(attr[minOrMax], 10); + if (!isEmpty(value) && langthInvalid(value, parsedValue)) { + ctrl.$setValidity(validityValue, false); + return undefined; + } else { + ctrl.$setValidity(validityValue, true); + return value; + } + }; - // max length validator - if (attr.ngMaxlength) { - var maxlength = int(attr.ngMaxlength); - var maxLengthValidator = function(value) { - if (!isEmpty(value) && value.length > maxlength) { - ctrl.$setValidity('maxlength', false); - return undefined; - } else { - ctrl.$setValidity('maxlength', true); - return value; - } - }; + ctrl.$parsers.push(validator); + ctrl.$formatters.push(validator); - ctrl.$parsers.push(maxLengthValidator); - ctrl.$formatters.push(maxLengthValidator); + attr.$observe(minOrMax, function() { + ctrl.$setViewValue(ctrl.$viewValue); + }); + } } + applyMinMaxLength('ngMinlength', function langthInvalid(value, min) {return value.length < min;}); + applyMinMaxLength('ngMaxlength', function langthInvalid(value, max) {return value.length > max;}); } function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) { @@ -653,9 +644,9 @@ function checkboxInputType(scope, element, attr, ctrl) { * @param {string} ngModel Assignable angular expression to data-bind to. * @param {string=} name Property name of the form under which the control is published. * @param {string=} required Sets `required` validation error key if the value is not entered. - * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than + * @param {expression=} ngMinlength Sets `minlength` validation error key if the value is shorter than * minlength. - * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than + * @param {expression=} ngMaxlength Sets `maxlength` validation error key if the value is longer than * maxlength. * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for @@ -677,9 +668,9 @@ function checkboxInputType(scope, element, attr, ctrl) { * @param {string} ngModel Assignable angular expression to data-bind to. * @param {string=} name Property name of the form under which the control is published. * @param {string=} required Sets `required` validation error key if the value is not entered. - * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than + * @param {expression=} ngMinlength Sets `minlength` validation error key if the value is shorter than * minlength. - * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than + * @param {expression=} ngMaxlength Sets `maxlength` validation error key if the value is longer than * maxlength. * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js old mode 100644 new mode 100755 index 01669b18dd56..7f15a8f80d71 --- a/test/ng/directive/inputSpec.js +++ b/test/ng/directive/inputSpec.js @@ -505,7 +505,7 @@ describe('input', function() { describe('minlength', function() { - it('should invalid shorter than given minlenght', function() { + it('should invalid shorter than given minlength', function() { compileInput(''); changeInputValueTo('aa'); @@ -514,12 +514,31 @@ describe('input', function() { changeInputValueTo('aaa'); expect(scope.value).toBe('aaa'); }); + + + it('should invalid shorter than given minlength-expressions', function() { + scope.$apply(function(){ + scope.min = 5 + }); + compileInput(''); + changeInputValueTo('aa'); + scope.$digest(); + expect(scope.value).toBeUndefined(); + + changeInputValueTo('aaaaa'); + expect(scope.value).toBe('aaaaa'); + + scope.$apply(function(){ + scope.min = 6; + }); + expect(scope.value).toBeUndefined(); + }); }); describe('maxlength', function() { - it('should invalid shorter than given maxlenght', function() { + it('should invalid longer than given maxlength', function() { compileInput(''); changeInputValueTo('aaaaaaaa'); @@ -528,6 +547,25 @@ describe('input', function() { changeInputValueTo('aaa'); expect(scope.value).toBe('aaa'); }); + + + it('should invalid longer than given maxlength-expressions', function() { + scope.$apply(function(){ + scope.max = 5 + }); + compileInput(''); + changeInputValueTo('aaaaaaaa'); + scope.$digest(); + expect(scope.value).toBeUndefined(); + + changeInputValueTo('aaa'); + expect(scope.value).toBe('aaa'); + + scope.$apply(function(){ + scope.max = 2; + }); + expect(scope.value).toBeUndefined(); + }); });