Angular 1.3.19 ではng-pattern、UI マスクを壊す動作が変更されました。
現在、 -Reference in changelog$viewValueの代わりにng $modelValue- pattern ディレクティブが検証されます。
Angular チームは、以前の動作を元に戻すカスタム ディレクティブを提供しました。これは、この問題の適切な回避策です。
pattern-modelとの両方を使用する場合は、フィールドに属性を追加する必要がui-maskありng-patternます。
<input type="text"
class="form-control input-sm"
placeholder="hh:mm:ss"
name="hhmmss"
ng-model="data.hhmmss"
ng-pattern="/^([0-2]|0[0-9]|1[0-9]|2[0-3]):?[0-5][0-9]:?[0-5][0-9]$/"
ui-mask="99:99:99"
pattern-model
/>
ディレクティブのコード (コードベースに追加):
.directive('patternModel', 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 guarantees our observer is called first.
*/
if (angular.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) ||
angular.isUndefined(regexp) ||
regexp.test(value);
};
}
};
}
};
});
ui-mask GitHub -リファレンスの問題。