我发现很多以下形式的html输入模式,这是电话号码:
<input type="text" ng-model="CellPhoneNumber" required ng-pattern="/^[0-9]+$/" ng-minlength="10" />
我想创建一个自定义指令,无论该指令适用于哪里,它都会告诉Angular应用所有这三个规则,例如:
<input type="text" ng-model="CellPhoneNumber" bk-ng-validation="phoneNumber"/>
然后,我指令中的代码将找到并调用一个名为的函数phoneNumber
,在该函数中,我希望看到类似以下内容的内容:
清单1:
function bkNgPhoneNumber(model) {
// This is purely SPECULATIVE pseudo-code, just to convey an idea.
model.errors.add(applyMinLength(10, model));
model.errors.add(applyMaxLength(15, model));
model.errors.add(applyPattern("/^[0-9]+$/", model));
}
我宁愿使用上述方法而不是为这些规则重写代码,例如:
清单2:
function phoneNumber(model) {
if (model.length < 10 || model.length > 15) {
model.errors.add("Must be 10 to 15 chars!");
}
}
我不想取消所有基于属性的指令,但最好创建一个“宏”指令,该指令将调用我的清单1代码,而后者将实际调用一组更多的“微”验证。
一种方法(即应用现有的验证器而无需再次编写其代码)将是添加验证指令的相应属性并强制重新编译。这将要求您的指令具有足够高的优先级,并且也必须为terminal: true
。
app.directive("bkNgValidation", function($compile){
return {
priority: 10000,
terminal: true,
link: function(scope, element){
element.attr("ng-required", "true");
element.attr("ng-minlength", 20);
element.attr("ng-maxlength", 30);
// prevent infinite loop
element.removeAttr("bk-ng-validation");
$compile(element)(scope);
}
};
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句