From e845c0434dc3892a477f949c47bcfafaef73cce9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Wed, 7 May 2014 01:03:28 -0400 Subject: [PATCH 1/6] feat(NgModel): introduce the $validators pipeline --- src/ng/directive/input.js | 66 +++++++++++---- test/ng/directive/inputSpec.js | 149 +++++++++++++++++++++++++++++++++ 2 files changed, 200 insertions(+), 15 deletions(-) diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js index 554e930e5dbf..26af20d5f5ae 100644 --- a/src/ng/directive/input.js +++ b/src/ng/directive/input.js @@ -1435,6 +1435,12 @@ var VALID_CLASS = 'ng-valid', * ngModel.$formatters.push(formatter); * ``` * + * @property {Object.} $validators A collection of validators that are applied + * whenever the model value changes. The key value within the object refers to the name of the + * validator while the function refers to the validation operation. The validation operation is + * provided with the model value as an argument and must return a true or false value depending + * on the response of that validation. + * * @property {Array.} $viewChangeListeners Array of functions to execute whenever the * view value has changed. It is called with no arguments, and its return value is ignored. * This can be used in place of additional $watches against the model value. @@ -1551,6 +1557,7 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$ function($scope, $exceptionHandler, $attr, $element, $parse, $animate, $timeout) { this.$viewValue = Number.NaN; this.$modelValue = Number.NaN; + this.$validators = {}; this.$parsers = []; this.$formatters = []; this.$viewChangeListeners = []; @@ -1626,7 +1633,8 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$ * Change the validity state, and notifies the form when the control changes validity. (i.e. it * does not notify form if given validator is already marked as invalid). * - * This method should be called by validators - i.e. the parser or formatter functions. + * This method can be called within $parsers/$formatters. However, if possible, please use the + * `ngModel.$validators` pipeline which is designed to handle validations with true/false values. * * @param {string} validationErrorKey Name of the validator. the `validationErrorKey` will assign * to `$error[validationErrorKey]=isValid` so that it is available for data-binding. @@ -1743,6 +1751,23 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$ ctrl.$render(); }; + /** + * @ngdoc method + * @name ngModel.NgModelController#$validate + * + * @description + * Runs each of the registered validations set on the $validators object. + */ + this.$validate = function() { + this.$$runValidators(ctrl.$modelValue, ctrl.$viewValue); + }; + + this.$$runValidators = function(modelValue, viewValue) { + forEach(ctrl.$validators, function(fn, name) { + ctrl.$setValidity(name, fn(modelValue, viewValue)); + }); + }; + /** * @ngdoc method * @name ngModel.NgModelController#$commitViewValue @@ -1755,12 +1780,12 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$ * usually handles calling this in response to input events. */ this.$commitViewValue = function() { - var value = ctrl.$viewValue; + var viewValue = ctrl.$viewValue; $timeout.cancel(pendingDebounce); - if (ctrl.$$lastCommittedViewValue === value) { + if (ctrl.$$lastCommittedViewValue === viewValue) { return; } - ctrl.$$lastCommittedViewValue = value; + ctrl.$$lastCommittedViewValue = viewValue; // change to dirty if (ctrl.$pristine) { @@ -1771,13 +1796,19 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$ parentForm.$setDirty(); } + var modelValue = viewValue; forEach(ctrl.$parsers, function(fn) { - value = fn(value); + modelValue = fn(modelValue); }); - if (ctrl.$modelValue !== value) { - ctrl.$modelValue = value; - ngModelSet($scope, value); + if (ctrl.$modelValue !== modelValue && + (isUndefined(ctrl.$$invalidModelValue) || ctrl.$$invalidModelValue != modelValue)) { + + ctrl.$$runValidators(modelValue, viewValue); + ctrl.$modelValue = ctrl.$valid ? modelValue : undefined; + ctrl.$$invalidModelValue = ctrl.$valid ? undefined : modelValue; + + ngModelSet($scope, ctrl.$modelValue); forEach(ctrl.$viewChangeListeners, function(listener) { try { listener(); @@ -1851,26 +1882,31 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$ // model -> value $scope.$watch(function ngModelWatch() { - var value = ngModelGet($scope); + var modelValue = ngModelGet($scope); // if scope model value and ngModel value are out of sync - if (ctrl.$modelValue !== value) { + if (ctrl.$modelValue !== modelValue && + (isUndefined(ctrl.$$invalidModelValue) || ctrl.$$invalidModelValue != modelValue)) { var formatters = ctrl.$formatters, idx = formatters.length; - ctrl.$modelValue = value; + var viewValue = modelValue; while(idx--) { - value = formatters[idx](value); + viewValue = formatters[idx](viewValue); } - if (ctrl.$viewValue !== value) { - ctrl.$viewValue = ctrl.$$lastCommittedViewValue = value; + ctrl.$$runValidators(modelValue, viewValue); + ctrl.$modelValue = ctrl.$valid ? modelValue : undefined; + ctrl.$$invalidModelValue = ctrl.$valid ? undefined : modelValue; + + if (ctrl.$viewValue !== viewValue) { + ctrl.$viewValue = ctrl.$$lastCommittedViewValue = viewValue; ctrl.$render(); } } - return value; + return modelValue; }); }]; diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js index 4c2f62274485..b18c3c2d9109 100644 --- a/test/ng/directive/inputSpec.js +++ b/test/ng/directive/inputSpec.js @@ -261,6 +261,155 @@ describe('NgModelController', function() { expect(ctrl.$render).toHaveBeenCalledOnce(); }); }); + + describe('$validators', function() { + + it('should perform validations when $validate() is called', function() { + ctrl.$validators.uppercase = function(value) { + return (/^[A-Z]+$/).test(value); + }; + + ctrl.$modelValue = 'test'; + ctrl.$validate(); + + expect(ctrl.$valid).toBe(false); + + ctrl.$modelValue = 'TEST'; + ctrl.$validate(); + + expect(ctrl.$valid).toBe(true); + }); + + it('should perform validations when $validate() is called', function() { + ctrl.$validators.uppercase = function(value) { + return (/^[A-Z]+$/).test(value); + }; + + ctrl.$modelValue = 'test'; + ctrl.$validate(); + + expect(ctrl.$valid).toBe(false); + + ctrl.$modelValue = 'TEST'; + ctrl.$validate(); + + expect(ctrl.$valid).toBe(true); + }); + + it('should always perform validations using the parsed model value', function() { + var captures; + ctrl.$validators.raw = function() { + captures = arguments; + return captures[0]; + }; + + ctrl.$parsers.push(function(value) { + return value.toUpperCase(); + }); + + ctrl.$setViewValue('my-value'); + + expect(captures).toEqual(['MY-VALUE', 'my-value']); + }); + + it('should always perform validations using the formatted view value', function() { + var captures; + ctrl.$validators.raw = function() { + captures = arguments; + return captures[0]; + }; + + ctrl.$formatters.push(function(value) { + return value + '...'; + }); + + scope.$apply(function() { + scope.value = 'matias'; + }); + + expect(captures).toEqual(['matias', 'matias...']); + }); + + it('should only perform validations if the view value is different', function() { + var count = 0; + ctrl.$validators.countMe = function() { + count++; + }; + + ctrl.$setViewValue('my-value'); + expect(count).toBe(1); + + ctrl.$setViewValue('my-value'); + expect(count).toBe(1); + + ctrl.$setViewValue('your-value'); + expect(count).toBe(2); + }); + + it('should perform validations twice each time the model value changes within a digest', function() { + var count = 0; + ctrl.$validators.number = function(value) { + count++; + return (/^\d+$/).test(value); + }; + + function val(v) { + scope.$apply(function() { + scope.value = v; + }); + } + + val(''); + expect(count).toBe(1); + + val(1); + expect(count).toBe(2); + + val(1); + expect(count).toBe(2); + + val(''); + expect(count).toBe(3); + }); + + it('should only validate to true if all validations are true', function() { + var curry = function(v) { + return function() { + return v; + }; + }; + + ctrl.$validators.a = curry(true); + ctrl.$validators.b = curry(true); + ctrl.$validators.c = curry(false); + + ctrl.$validate(); + expect(ctrl.$valid).toBe(false); + + ctrl.$validators.c = curry(true); + + ctrl.$validate(); + expect(ctrl.$valid).toBe(true); + }); + + it('should register invalid validations on the $error object', function() { + var curry = function(v) { + return function() { + return v; + }; + }; + + ctrl.$validators.unique = curry(false); + ctrl.$validators.tooLong = curry(false); + ctrl.$validators.notNumeric = curry(true); + + ctrl.$validate(); + + expect(ctrl.$error.unique).toBe(true); + expect(ctrl.$error.tooLong).toBe(true); + expect(ctrl.$error.notNumeric).not.toBe(true); + }); + }); }); describe('ngModel', function() { From c07d7baf019cb46d964c5beb136b986a6c9cf856 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Wed, 30 Apr 2014 20:56:50 -0400 Subject: [PATCH 2/6] fix(NgModel): make sure the required validator uses the $validators pipeline Fixes #5164 --- src/ng/directive/input.js | 16 ++++------------ test/ng/directive/inputSpec.js | 2 +- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js index 26af20d5f5ae..b9b3ed684db5 100644 --- a/src/ng/directive/input.js +++ b/src/ng/directive/input.js @@ -1781,6 +1781,7 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$ */ this.$commitViewValue = function() { var viewValue = ctrl.$viewValue; + $timeout.cancel(pendingDebounce); if (ctrl.$$lastCommittedViewValue === viewValue) { return; @@ -2130,21 +2131,12 @@ var requiredDirective = function() { if (!ctrl) return; attr.required = true; // force truthy in case we are on non input element - var validator = function(value) { - if (attr.required && ctrl.$isEmpty(value)) { - ctrl.$setValidity('required', false); - return; - } else { - ctrl.$setValidity('required', true); - return value; - } + ctrl.$validators.required = function(modelValue, viewValue) { + return !attr.required || !ctrl.$isEmpty(viewValue); }; - ctrl.$formatters.push(validator); - ctrl.$parsers.unshift(validator); - attr.$observe('required', function() { - validator(ctrl.$viewValue); + ctrl.$validate(); }); } }; diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js index b18c3c2d9109..2bb5073b89d3 100644 --- a/test/ng/directive/inputSpec.js +++ b/test/ng/directive/inputSpec.js @@ -2564,7 +2564,7 @@ describe('input', function() { compileInput(''); scope.$apply(function() { - scope.name = ''; + scope.name = null; }); expect(inputElm).toBeInvalid(); From 64d2a1dddb37afc10ff969b5a5c808e78ad66717 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Wed, 30 Apr 2014 21:01:47 -0400 Subject: [PATCH 3/6] fix(NgModel): make sure the pattern validator uses the $validators pipeline --- src/ng/directive/input.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js index b9b3ed684db5..2df6b9d36f0d 100644 --- a/src/ng/directive/input.js +++ b/src/ng/directive/input.js @@ -994,12 +994,9 @@ function textInputType(scope, element, attr, ctrl, $sniffer, $browser) { regexp = regex || undefined; }); - var patternValidator = function(value) { - return validate(ctrl, 'pattern', ctrl.$isEmpty(value) || isUndefined(regexp) || regexp.test(value), value); + ctrl.$validators.pattern = function(value) { + return ctrl.$isEmpty(value) || isUndefined(regexp) || regexp.test(value); }; - - ctrl.$formatters.push(patternValidator); - ctrl.$parsers.push(patternValidator); } // min length validator From 999aa15d7940e045c91925c04d097d6f0661289e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Wed, 30 Apr 2014 21:13:39 -0400 Subject: [PATCH 4/6] fix(NgModel): make sure the ngMinlength and ngMaxlength validators use the $validators pipeline Fixes #6304 --- src/ng/directive/input.js | 14 ++++---------- test/ng/directive/inputSpec.js | 12 ++++++------ 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js index 2df6b9d36f0d..b13836dab8f6 100644 --- a/src/ng/directive/input.js +++ b/src/ng/directive/input.js @@ -1002,23 +1002,17 @@ function textInputType(scope, element, attr, ctrl, $sniffer, $browser) { // min length validator if (attr.ngMinlength) { var minlength = int(attr.ngMinlength); - var minLengthValidator = function(value) { - return validate(ctrl, 'minlength', ctrl.$isEmpty(value) || value.length >= minlength, value); + ctrl.$validators.minlength = function(value) { + return ctrl.$isEmpty(value) || value.length >= minlength; }; - - ctrl.$parsers.push(minLengthValidator); - ctrl.$formatters.push(minLengthValidator); } // max length validator if (attr.ngMaxlength) { var maxlength = int(attr.ngMaxlength); - var maxLengthValidator = function(value) { - return validate(ctrl, 'maxlength', ctrl.$isEmpty(value) || value.length <= maxlength, value); + ctrl.$validators.maxlength = function(value) { + return ctrl.$isEmpty(value) || value.length <= maxlength; }; - - ctrl.$parsers.push(maxLengthValidator); - ctrl.$formatters.push(maxLengthValidator); } } diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js index 2bb5073b89d3..92bce6e07559 100644 --- a/test/ng/directive/inputSpec.js +++ b/test/ng/directive/inputSpec.js @@ -1300,14 +1300,14 @@ describe('input', function() { describe('minlength', function() { - it('should invalid shorter than given minlength', function() { + it('should invalidate values that are shorter than the given minlength', function() { compileInput(''); changeInputValueTo('aa'); - expect(scope.value).toBeUndefined(); + expect(inputElm).toBeInvalid(); changeInputValueTo('aaa'); - expect(scope.value).toBe('aaa'); + expect(inputElm).toBeValid(); }); it('should listen on ng-minlength when minlength is observed', function() { @@ -1328,14 +1328,14 @@ describe('input', function() { describe('maxlength', function() { - it('should invalid shorter than given maxlength', function() { + it('should invalidate values that are longer than the given maxlength', function() { compileInput(''); changeInputValueTo('aaaaaaaa'); - expect(scope.value).toBeUndefined(); + expect(inputElm).toBeInvalid(); changeInputValueTo('aaa'); - expect(scope.value).toBe('aaa'); + expect(inputElm).toBeValid(); }); it('should listen on ng-maxlength when maxlength is observed', function() { From c15d8278b81cda8321901368cd18dacee82bb4a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Wed, 7 May 2014 02:23:15 -0400 Subject: [PATCH 5/6] fix(NgModel): make ngMinlength and ngMaxlength as standalone directives Fixes #6750 --- src/AngularPublic.js | 8 +++++ src/ng/directive/input.js | 53 ++++++++++++++++++++++++---------- test/ng/directive/inputSpec.js | 36 +++++++++++++++++++++++ 3 files changed, 81 insertions(+), 16 deletions(-) diff --git a/src/AngularPublic.js b/src/AngularPublic.js index e97723ef946d..76bbf4a83ed8 100644 --- a/src/AngularPublic.js +++ b/src/AngularPublic.js @@ -45,6 +45,10 @@ ngChangeDirective, requiredDirective, requiredDirective, + minlengthDirective, + minlengthDirective, + maxlengthDirective, + maxlengthDirective, ngValueDirective, ngModelOptionsDirective, ngAttributeAliasDirectives, @@ -184,6 +188,10 @@ function publishExternalAPI(angular){ ngChange: ngChangeDirective, required: requiredDirective, ngRequired: requiredDirective, + ngMinlength: minlengthDirective, + minlength: minlengthDirective, + ngMaxlength: maxlengthDirective, + maxlength: maxlengthDirective, ngValue: ngValueDirective, ngModelOptions: ngModelOptionsDirective }). diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js index b13836dab8f6..2dd2a758c966 100644 --- a/src/ng/directive/input.js +++ b/src/ng/directive/input.js @@ -998,22 +998,6 @@ function textInputType(scope, element, attr, ctrl, $sniffer, $browser) { return ctrl.$isEmpty(value) || isUndefined(regexp) || regexp.test(value); }; } - - // min length validator - if (attr.ngMinlength) { - var minlength = int(attr.ngMinlength); - ctrl.$validators.minlength = function(value) { - return ctrl.$isEmpty(value) || value.length >= minlength; - }; - } - - // max length validator - if (attr.ngMaxlength) { - var maxlength = int(attr.ngMaxlength); - ctrl.$validators.maxlength = function(value) { - return ctrl.$isEmpty(value) || value.length <= maxlength; - }; - } } function weekParser(isoWeek) { @@ -2134,6 +2118,43 @@ var requiredDirective = function() { }; +var maxlengthDirective = function() { + return { + require: '?ngModel', + link: function(scope, elm, attr, ctrl) { + if (!ctrl) return; + + var maxlength = 0; + attr.$observe('maxlength', function(value) { + maxlength = int(value) || 0; + ctrl.$validate(); + }); + ctrl.$validators.maxlength = function(value) { + return ctrl.$isEmpty(value) || value.length <= maxlength; + }; + } + }; +}; + +var minlengthDirective = function() { + return { + require: '?ngModel', + link: function(scope, elm, attr, ctrl) { + if (!ctrl) return; + + var minlength = 0; + attr.$observe('minlength', function(value) { + minlength = int(value) || 0; + ctrl.$validate(); + }); + ctrl.$validators.minlength = function(value) { + return ctrl.$isEmpty(value) || value.length >= minlength; + }; + } + }; +}; + + /** * @ngdoc directive * @name ngList diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js index 92bce6e07559..048c3170507d 100644 --- a/test/ng/directive/inputSpec.js +++ b/test/ng/directive/inputSpec.js @@ -1323,6 +1323,24 @@ describe('input', function() { expect(value).toBe(5); }); + + it('should observe the standard minlength attribute and register it as a validator on the model', function() { + compileInput(''); + scope.$apply(function() { + scope.min = 10; + }); + + changeInputValueTo('12345'); + expect(inputElm).toBeInvalid(); + expect(scope.form.input.$error.minlength).toBe(true); + + scope.$apply(function() { + scope.min = 5; + }); + + expect(inputElm).toBeValid(); + expect(scope.form.input.$error.minlength).not.toBe(true); + }); }); @@ -1351,6 +1369,24 @@ describe('input', function() { expect(value).toBe(10); }); + + it('should observe the standard maxlength attribute and register it as a validator on the model', function() { + compileInput(''); + scope.$apply(function() { + scope.max = 1; + }); + + changeInputValueTo('12345'); + expect(inputElm).toBeInvalid(); + expect(scope.form.input.$error.maxlength).toBe(true); + + scope.$apply(function() { + scope.max = 6; + }); + + expect(inputElm).toBeValid(); + expect(scope.form.input.$error.maxlength).not.toBe(true); + }); }); From 4e4958c8e04f20e58abe7699ffdab4e25f228d38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Tue, 27 May 2014 15:52:38 -0400 Subject: [PATCH 6/6] fix(NgModel): ensure pattern and ngPattern use the same validator BREAKING CHANGE: If an expression is used on ng-pattern (such as `ng-pattern="exp"`) or on the pattern attribute (something like on `pattern="{{ exp }}"`) and the expression itself evaluates to a string then the validator will not parse the string as a literal regular expression object (a value like `/abc/i`). Instead, the entire string will be created as the regular expression to test against. This means that any expression flags will not be placed on the RegExp object. To get around this limitation, use a regular expression object as the value for the expression. //before $scope.exp = '/abc/i'; //after $scope.exp = /abc/i; --- src/.jshintrc | 1 - src/Angular.js | 3 -- src/AngularPublic.js | 8 +++-- src/ng/directive/attrs.js | 2 +- src/ng/directive/input.js | 55 ++++++++++++++++++---------------- test/ng/directive/inputSpec.js | 51 +++++++++++++++++++++++++++++-- 6 files changed, 86 insertions(+), 34 deletions(-) diff --git a/src/.jshintrc b/src/.jshintrc index fc37b31ec226..1227ec50b7c7 100644 --- a/src/.jshintrc +++ b/src/.jshintrc @@ -34,7 +34,6 @@ "nodeName_": false, "uid": false, - "REGEX_STRING_REGEXP" : false, "lowercase": false, "uppercase": false, "manualLowercase": false, diff --git a/src/Angular.js b/src/Angular.js index 725164808d9a..a81fe1c9aca7 100644 --- a/src/Angular.js +++ b/src/Angular.js @@ -13,7 +13,6 @@ -angularModule, -nodeName_, -uid, - -REGEX_STRING_REGEXP, -lowercase, -uppercase, @@ -103,8 +102,6 @@ *
*/ -var REGEX_STRING_REGEXP = /^\/(.+)\/([a-z]*)$/; - /** * @ngdoc function * @name angular.lowercase diff --git a/src/AngularPublic.js b/src/AngularPublic.js index 76bbf4a83ed8..4f2474fba9f7 100644 --- a/src/AngularPublic.js +++ b/src/AngularPublic.js @@ -43,6 +43,8 @@ ngModelDirective, ngListDirective, ngChangeDirective, + patternDirective, + patternDirective, requiredDirective, requiredDirective, minlengthDirective, @@ -186,12 +188,14 @@ function publishExternalAPI(angular){ ngModel: ngModelDirective, ngList: ngListDirective, ngChange: ngChangeDirective, + pattern: patternDirective, + ngPattern: patternDirective, required: requiredDirective, ngRequired: requiredDirective, - ngMinlength: minlengthDirective, minlength: minlengthDirective, - ngMaxlength: maxlengthDirective, + ngMinlength: minlengthDirective, maxlength: maxlengthDirective, + ngMaxlength: maxlengthDirective, ngValue: ngValueDirective, ngModelOptions: ngModelOptionsDirective }). diff --git a/src/ng/directive/attrs.js b/src/ng/directive/attrs.js index 9fe40d34b6ff..0ea1e200c81c 100644 --- a/src/ng/directive/attrs.js +++ b/src/ng/directive/attrs.js @@ -370,7 +370,7 @@ forEach(ALIASED_ATTR, function(htmlAttr, ngAttr) { //special case ngPattern when a literal regular expression value //is used as the expression (this way we don't have to watch anything). if (ngAttr === "ngPattern" && attr.ngPattern.charAt(0) == "/") { - var match = attr.ngPattern.match(REGEX_STRING_REGEXP); + var match = attr.ngPattern.match(/^\/(.+)\/([a-z]*)$/); if (match) { attr.$set("ngPattern", new RegExp(match[1], match[2])); return; diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js index 2dd2a758c966..39c0b7733aea 100644 --- a/src/ng/directive/input.js +++ b/src/ng/directive/input.js @@ -973,31 +973,6 @@ function textInputType(scope, element, attr, ctrl, $sniffer, $browser) { ctrl.$render = function() { element.val(ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue); }; - - // pattern validator - if (attr.ngPattern) { - var regexp, patternExp = attr.ngPattern; - attr.$observe('pattern', function(regex) { - if(isString(regex)) { - var match = regex.match(REGEX_STRING_REGEXP); - if(match) { - regex = new RegExp(match[1], match[2]); - } - } - - if (regex && !regex.test) { - throw minErr('ngPattern')('noregexp', - 'Expected {0} to be a RegExp but was {1}. Element: {2}', patternExp, - regex, startingTag(element)); - } - - regexp = regex || undefined; - }); - - ctrl.$validators.pattern = function(value) { - return ctrl.$isEmpty(value) || isUndefined(regexp) || regexp.test(value); - }; - } } function weekParser(isoWeek) { @@ -2118,6 +2093,36 @@ var requiredDirective = function() { }; +var patternDirective = function() { + return { + require: '?ngModel', + link: function(scope, elm, attr, ctrl) { + if (!ctrl) return; + + var regexp, patternExp = attr.ngPattern || attr.pattern; + attr.$observe('pattern', function(regex) { + if(isString(regex) && regex.length > 0) { + regex = new RegExp(regex); + } + + if (regex && !regex.test) { + throw minErr('ngPattern')('noregexp', + 'Expected {0} to be a RegExp but was {1}. Element: {2}', patternExp, + regex, startingTag(elm)); + } + + regexp = regex || undefined; + ctrl.$validate(); + }); + + ctrl.$validators.pattern = function(value) { + return ctrl.$isEmpty(value) || isUndefined(regexp) || regexp.test(value); + }; + } + }; +}; + + var maxlengthDirective = function() { return { require: '?ngModel', diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js index 048c3170507d..8115566f125f 100644 --- a/test/ng/directive/inputSpec.js +++ b/test/ng/directive/inputSpec.js @@ -1286,12 +1286,59 @@ describe('input', function() { expect(inputElm).toBeInvalid(); }); + it('should perform validations when the ngPattern scope value changes', function() { + scope.regexp = /^[a-z]+$/; + compileInput(''); + + changeInputValueTo('abcdef'); + expect(inputElm).toBeValid(); + + changeInputValueTo('123'); + expect(inputElm).toBeInvalid(); + + scope.$apply(function() { + scope.regexp = /^\d+$/; + }); + + expect(inputElm).toBeValid(); + + changeInputValueTo('abcdef'); + expect(inputElm).toBeInvalid(); + + scope.$apply(function() { + scope.regexp = ''; + }); + + expect(inputElm).toBeValid(); + }); + + it('should register "pattern" with the model validations when the pattern attribute is used', function() { + compileInput(''); + + changeInputValueTo('abcd'); + expect(inputElm).toBeInvalid(); + expect(scope.form.input.$error.pattern).toBe(true); + + changeInputValueTo('12345'); + expect(inputElm).toBeValid(); + expect(scope.form.input.$error.pattern).not.toBe(true); + }); + + it('should not throw an error when scope pattern can\'t be found', function() { + expect(function() { + compileInput(''); + scope.$apply(function() { + scope.foo = 'bar'; + }); + }).not.toThrowMatching(/^\[ngPattern:noregexp\] Expected fooRegexp to be a RegExp but was/); + }); - it('should throw an error when scope pattern is invalid', function() { + it('should throw an error when the scope pattern is not a regular expression', function() { expect(function() { compileInput(''); scope.$apply(function() { - scope.fooRegexp = '/...'; + scope.fooRegexp = {}; + scope.foo = 'bar'; }); }).toThrowMatching(/^\[ngPattern:noregexp\] Expected fooRegexp to be a RegExp but was/); });