我有一个称为valid-number的验证指令,用于使用$setValidity设置表单的有效性 – 对于将该指令应用于属性的输入框中输入的任何文本值都适用.
HTML是
<form name="numberForm"> <input name="amount" type="text" ng-model="amount" required valid-number /></form>
该指令如下
angular.module('test',[]).directive('validNumber',function(){
return{
require: "ngModel",link: function(scope,elm,attrs,ctrl){
var regex=/\d/;
ctrl.$parsers.unshift(function(viewValue){
var floatValue = parseFloat(viewValue);
if(regex.test(viewValue)){
ctrl.$setValidity('validNumber',true);
}
else{
ctrl.$setValidity('validNumber',false);
}
return viewValue;
});
}
};
});
然而,我也希望触发验证,并将css设置为无效的clsss,如果输入框的值初始化为页面首次加载时无效,例如,如果我设置$scope.amount =’不是一个数字“我希望输入框已经应用了这个指令,但没有喜悦.为了不将数字突出显示为无效,我必须更改输入的内容,这会触发该指令.
如何确保该指令适用于< input>被初始化？
一个完整的代码示例在这里;
解决方法
$parsers数组包含将应用于模型从视图(用户输入的类型)接收的值的函数列表,$formatters数组包含在模型值显示之前应用于模型值的函数列表视图.
在你的指令中,你正确地使用了$parsers数组,但如果你想要初始化的值得到验证,你还需要添加$formatters数组：
angular.module('test',function(){
return{
require: "ngModel",ctrl){
var regex = /^\d$/;
var validator = function(value){
ctrl.$setValidity('validNumber',regex.test(value));
return value;
};
ctrl.$parsers.unshift(validator);
ctrl.$formatters.unshift(validator);
}
};
});
