@@ -1455,7 +1455,7 @@ For more info on the topic, you can take a look at this
1455
1455
## Migrating from 1.3 to 1.4
1456
1456
1457
1457
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:
1459
1459
`limitTo` and `filter`.
1460
1460
1461
1461
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
1469
1469
involves pulling error message data from a server and then displaying that data via the mechanics of ngMessages. Be
1470
1470
sure to read the breaking change involved with `ngMessagesInclude` to upgrade your template code.
1471
1471
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.
1475
1475
1476
1476
1477
1477
@@ -1575,7 +1575,7 @@ class based animations (animations triggered via ngClass) in order to ensure tha
1575
1575
1576
1576
1577
1577
1578
- ### Forms (`ngMessages`, `ngOptions`, `select`)
1578
+ ### Forms (`ngMessages`, `ngOptions`, `select`, `ngPattern` and `pattern` )
1579
1579
1580
1580
#### ngMessages
1581
1581
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) {
1683
1683
});
1684
1684
```
1685
1685
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
+
1686
1759
1687
1760
### form
1688
1761
0 commit comments