docs(guide/migration): add info for 1.4 (ng)Pattern BC

diegomrsantos · Narretz · commit ebaa3366145e · 2017-03-07T20:24:59.000+01:00
Breaking change was introduced in commit 0e00108. This content being included in the migration guide is taken from the commit message of commit 0e00108. Closes angular#15758 Closes angular#15765
diff --git a/docs/content/guide/migration.ngdoc b/docs/content/guide/migration.ngdoc
@@ -1454,9 +1454,8 @@ For more info on the topic, you can take a look at this
 
 ## Migrating from 1.3 to 1.4
 
-Angular 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:
-`limitTo` and `filter`.
+AngularJS 1.4 fixes major animation issues and introduces a new API for `ngCookies`. Further, there
+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
 for developers to construct more versatile animations.  We now have access to `$animateCss`
@@ -1469,9 +1468,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 +1574,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 +1682,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
 
