我有以下指令,我把它放在使用angular-ui-bootstrap datepicker的输入字段中:
angular.module('directives.validators.date', [])
.directive('validDate',[ '$filter', function ($filter) {
return {
restrict:'A',
require:'ngModel',
link: function (scope, el, attrs, ngModel) {
var pattern = /^(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[012])\.(19|20)\d\d$/;
ngModel.scope = scope;
ngModel.attrs = attrs;
el.on('blur',function() {
if(typeof ngModel.$viewValue === "object"){
var str = $filter('date')(ngModel.$viewValue, "dd.MM.yyyy");
ngModel.$setViewValue(str);
}
if(ngModel.$viewValue){
if(ngModel.$viewValue!=="" && !pattern.test(ngModel.$viewValue)){
ngModel.$setValidity("date",false);
}
}
});
scope.$watch(function () {
return ngModel.$modelValue;
},
function() {
if(ngModel.$pristine){ //if the data has just been fetched, convert it to date format.
if (typeof ngModel.$viewValue === "number"){
var date = new Date(ngModel.$viewValue);
//var str = $filter('date')(date, "dd.MM.yyyy");
ngModel.$setViewValue(date);
ngModel.$setPristine(true);
var formName = $("form")[0].name;
ngModel.scope[formName].$setPristine(true);
ngModel.$setValidity("date",true);
}
}
if(ngModel.$viewValue){ //when the filed is changed, if it is corrected set that the date is valid
if(ngModel.$viewValue==="" || pattern.test(ngModel.$viewValue)){
ngModel.$setValidity("date",true);
}
}
});
}
};
}]);
我遇到了datepicker组件的问题,如果没有触及datepicker字段,我的表单就不会提交(即使它有数据,例如我编辑资源时)。即使提交了一个好日期,它也基本上将表格视为无效。该指令修正了这一点,但当我将我的角度升级到1.3时,该指令不再有效。
我需要更改什么才能使此指令再次起作用?
答案 0 :(得分:0)
Here你可以找到一些关于影响1.3中的ngModel的重大变化:
由于HTML5模式验证约束验证了输入值, 我们还应该对viewValue进行验证。虽然这有效 核心到Angular 1.2,在1.3中,我们不仅改变了验证, 但处理
input[date]
和input[number]
的方式 - 他们解析 他们的输入值分别为Date
和Number
,但不能 由正则表达式验证...