我有一个名为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;
});
}
};
});
但是,我也希望在页面第一次加载时,如果输入框初始化的值无效,例如如果我设置$scope.amount = 'not a number'
,那么验证也会被触发并将 CSS 设置为无效类。我期望输入框已经应用了该指令,但却没有成功。为了将“not a number”标记为无效,我必须更改输入框内容,这样才能触发该指令。
如何确保指令适用于任何用<input>
初始化的内容?
完整的代码示例在此处:http://jsfiddle.net/JW43C/5/