Skip to content

Commit 6eae236

Browse files
diegomrsantosellimist
authored andcommitted
docs(guide/migration): add info for 1.4 (ng)Pattern BC
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
1 parent 45a9d54 commit 6eae236

File tree

1 file changed

+78
-5
lines changed

1 file changed

+78
-5
lines changed

docs/content/guide/migration.ngdoc

+78-5
Original file line numberDiff line numberDiff line change
@@ -1455,7 +1455,7 @@ For more info on the topic, you can take a look at this
14551455
## Migrating from 1.3 to 1.4
14561456

14571457
AngularJS 1.4 fixes major animation issues and introduces a new API for `ngCookies`. Further, there
1458-
are changes to `ngMessages`, `$compile`, `ngRepeat`, `ngOptions `and some fixes to core filters:
1458+
are changes to `ngMessages`, `$compile`, `ngRepeat`, `ngOptions`, `ngPattern`, `pattern` and some fixes to core filters:
14591459
`limitTo` and `filter`.
14601460

14611461
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
14691469
involves pulling error message data from a server and then displaying that data via the mechanics of ngMessages. Be
14701470
sure to read the breaking change involved with `ngMessagesInclude` to upgrade your template code.
14711471

1472-
Other changes, such as the ordering of elements with ngRepeat and ngOptions, may also affect the behavior of your
1473-
application. And be sure to also read up on the changes to `$cookies`. The migration jump from 1.3 to 1.4 should be
1474-
relatively straightforward otherwise.
1472+
Other changes, such as the ordering of elements with ngRepeat and ngOptions and the way ngPattern and pattern directives
1473+
validate the regex, may also affect the behavior of your application. And be sure to also read up on the changes to `$cookies`.
1474+
The migration jump from 1.3 to 1.4 should be relatively straightforward otherwise.
14751475

14761476

14771477

@@ -1575,7 +1575,7 @@ class based animations (animations triggered via ngClass) in order to ensure tha
15751575

15761576

15771577

1578-
### Forms (`ngMessages`, `ngOptions`, `select`)
1578+
### Forms (`ngMessages`, `ngOptions`, `select`, `ngPattern` and `pattern`)
15791579

15801580
#### ngMessages
15811581
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) {
16831683
});
16841684
```
16851685

1686+
#### ngPattern and pattern
1687+
1688+
Due to [0e001084](https://github.com/angular/angular.js/commit/0e001084ffff8674efad289d37cb16cc4e46b50a),
1689+
The `ngPattern` and `pattern` directives will validate the regex
1690+
against the `$viewValue` of `ngModel`, i.e. the value of the model
1691+
before the $parsers are applied. Previously, the `$modelValue`
1692+
(the result of the $parsers) was validated.
1693+
1694+
This fixes issues where `input[date]` and `input[number]` cannot
1695+
be validated because the `$viewValue` string is parsed into
1696+
`Date` and `Number` respectively (starting with Angular 1.3).
1697+
It also brings the directives in line with HTML5 constraint
1698+
validation, which validates against the input value.
1699+
1700+
This change is unlikely to cause applications to fail, because even
1701+
in Angular 1.2, the value that was validated by pattern could have
1702+
been manipulated by the $parsers, as all validation was done
1703+
inside this pipeline.
1704+
1705+
If you rely on the pattern being validated against the `$modelValue`,
1706+
you must create your own validator directive that overwrites
1707+
the built-in pattern validator:
1708+
1709+
```
1710+
.directive('patternModelOverwrite', function patternModelOverwriteDirective() {
1711+
return {
1712+
restrict: 'A',
1713+
require: '?ngModel',
1714+
priority: 1,
1715+
compile: function() {
1716+
var regexp, patternExp;
1717+
1718+
return {
1719+
pre: function(scope, elm, attr, ctrl) {
1720+
if (!ctrl) return;
1721+
1722+
attr.$observe('pattern', function(regex) {
1723+
/**
1724+
* The built-in directive will call our overwritten validator
1725+
* (see below). We just need to update the regex.
1726+
* The preLink fn guaranetees our observer is called first.
1727+
*/
1728+
if (isString(regex) && regex.length > 0) {
1729+
regex = new RegExp('^' + regex + '$');
1730+
}
1731+
1732+
if (regex && !regex.test) {
1733+
//The built-in validator will throw at this point
1734+
return;
1735+
}
1736+
1737+
regexp = regex || undefined;
1738+
});
1739+
1740+
},
1741+
post: function(scope, elm, attr, ctrl) {
1742+
if (!ctrl) return;
1743+
1744+
regexp, patternExp = attr.ngPattern || attr.pattern;
1745+
1746+
//The postLink fn guarantees we overwrite the built-in pattern validator
1747+
ctrl.$validators.pattern = function(value) {
1748+
return ctrl.$isEmpty(value) ||
1749+
isUndefined(regexp) ||
1750+
regexp.test(value);
1751+
};
1752+
}
1753+
};
1754+
}
1755+
};
1756+
});
1757+
```
1758+
16861759

16871760
### form
16881761

0 commit comments

Comments
 (0)