From 9da716822008035fbd1082c904faa6ad0ae00a95 Mon Sep 17 00:00:00 2001 From: diegomrsantos Date: Tue, 28 Feb 2017 17:29:33 +0100 Subject: [PATCH 1/2] docs(guide/Migrating from Previous Versions): add info for 1.4 ngPattern and pattern breaking change Introduced in commit 0e00108 Closes #15758 --- docs/content/guide/migration.ngdoc | 83 ++++++++++++++++++++++++++++-- 1 file changed, 78 insertions(+), 5 deletions(-) diff --git a/docs/content/guide/migration.ngdoc b/docs/content/guide/migration.ngdoc index 69f164bfaf70..6d712376fdd6 100644 --- a/docs/content/guide/migration.ngdoc +++ b/docs/content/guide/migration.ngdoc @@ -1455,7 +1455,7 @@ For more info on the topic, you can take a look at this ## Migrating from 1.3 to 1.4 AngularJS 1.4 fixes major animation issues and introduces a new API for `ngCookies`. Further, there -are changes to `ngMessages`, `$compile`, `ngRepeat`, `ngOptions `and some fixes to core filters: +are changes to `ngMessages`, `$compile`, `ngRepeat`, `ngOptions`, `ngPattern`, `pattern` and some fixes to core filters: `limitTo` and `filter`. The reason for the ngAnimate refactor was to fix timing issues and to expose new APIs to allow @@ -1469,9 +1469,9 @@ to render error messages with ngMessages that are listed with a directive such a involves pulling error message data from a server and then displaying that data via the mechanics of ngMessages. Be sure to read the breaking change involved with `ngMessagesInclude` to upgrade your template code. -Other changes, such as the ordering of elements with ngRepeat and ngOptions, may also affect the behavior of your -application. And be sure to also read up on the changes to `$cookies`. The migration jump from 1.3 to 1.4 should be -relatively straightforward otherwise. +Other changes, such as the ordering of elements with ngRepeat and ngOptions and the way ngPattern and pattern directives +validate the regex, may also affect the behavior of your application. And be sure to also read up on the changes to `$cookies`. +The migration jump from 1.3 to 1.4 should be relatively straightforward otherwise. @@ -1575,7 +1575,7 @@ class based animations (animations triggered via ngClass) in order to ensure tha -### Forms (`ngMessages`, `ngOptions`, `select`) +### Forms (`ngMessages`, `ngOptions`, `select`, `ngPattern` and `pattern`) #### ngMessages The ngMessages module has also been subject to an internal refactor to allow it to be more flexible @@ -1683,6 +1683,79 @@ ngModelCtrl.$formatters.push(function(value) { }); ``` +#### ngPattern and pattern + +Due to [0e001084](https://github.com/angular/angular.js/commit/0e001084ffff8674efad289d37cb16cc4e46b50a), +The `ngPattern` and `pattern` directives will validate the regex +against the `viewValue` of `ngModel`, i.e. the value of the model +before the $parsers are applied. Previously, the modelValue +(the result of the $parsers) was validated. + +This fixes issues where `input[date]` and `input[number]` cannot +be validated because the viewValue string is parsed into +`Date` and `Number` respectively (starting with Angular 1.3). +It also brings the directives in line with HTML5 constraint +validation, which validates against the input value. + +This change is unlikely to cause applications to fail, because even +in Angular 1.2, the value that was validated by pattern could have +been manipulated by the $parsers, as all validation was done +inside this pipeline. + +If you rely on the pattern being validated against the modelValue, +you must create your own validator directive that overwrites +the built-in pattern validator: + +``` +.directive('patternModelOverwrite', function patternModelOverwriteDirective() { + return { + restrict: 'A', + require: '?ngModel', + priority: 1, + compile: function() { + var regexp, patternExp; + + return { + pre: function(scope, elm, attr, ctrl) { + if (!ctrl) return; + + attr.$observe('pattern', function(regex) { + /** + * The built-in directive will call our overwritten validator + * (see below). We just need to update the regex. + * The preLink fn guaranetees our observer is called first. + */ + if (isString(regex) && regex.length > 0) { + regex = new RegExp('^' + regex + '$'); + } + + if (regex && !regex.test) { + //The built-in validator will throw at this point + return; + } + + regexp = regex || undefined; + }); + + }, + post: function(scope, elm, attr, ctrl) { + if (!ctrl) return; + + regexp, patternExp = attr.ngPattern || attr.pattern; + + //The postLink fn guarantees we overwrite the built-in pattern validator + ctrl.$validators.pattern = function(value) { + return ctrl.$isEmpty(value) || + isUndefined(regexp) || + regexp.test(value); + }; + } + }; + } + }; +}); +``` + ### form From 6d5b68b6752698082fee5a728c8bce0dd1b21326 Mon Sep 17 00:00:00 2001 From: diegomrsantos Date: Tue, 7 Mar 2017 12:31:38 +0100 Subject: [PATCH 2/2] docs(guide/Migrating from Previous Versions): prefix viewValue and modelValue with $ as this is how they are stored in the model This content being included in the migration guide is taken from the commit message of 0e00108 --- docs/content/guide/migration.ngdoc | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/content/guide/migration.ngdoc b/docs/content/guide/migration.ngdoc index 6d712376fdd6..ea99c55e070e 100644 --- a/docs/content/guide/migration.ngdoc +++ b/docs/content/guide/migration.ngdoc @@ -1687,12 +1687,12 @@ ngModelCtrl.$formatters.push(function(value) { Due to [0e001084](https://github.com/angular/angular.js/commit/0e001084ffff8674efad289d37cb16cc4e46b50a), The `ngPattern` and `pattern` directives will validate the regex -against the `viewValue` of `ngModel`, i.e. the value of the model -before the $parsers are applied. Previously, the modelValue +against the `$viewValue` of `ngModel`, i.e. the value of the model +before the $parsers are applied. Previously, the `$modelValue` (the result of the $parsers) was validated. This fixes issues where `input[date]` and `input[number]` cannot -be validated because the viewValue string is parsed into +be validated because the `$viewValue` string is parsed into `Date` and `Number` respectively (starting with Angular 1.3). It also brings the directives in line with HTML5 constraint validation, which validates against the input value. @@ -1702,7 +1702,7 @@ in Angular 1.2, the value that was validated by pattern could have been manipulated by the $parsers, as all validation was done inside this pipeline. -If you rely on the pattern being validated against the modelValue, +If you rely on the pattern being validated against the `$modelValue`, you must create your own validator directive that overwrites the built-in pattern validator: