自定义表单验证
在某些情况下,基本验证是不够的。角度支持自定义验证将验证器函数添加到 ngModelController
上的 $validators
对象:
angular.module('app', [])
.directive('myValidator', function() {
return {
// element must have ng-model attribute
// or $validators does not work
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.myValidator = function(modelValue, viewValue) {
// validate viewValue with your custom logic
var valid = (viewValue && viewValue.length > 0) || false;
return valid;
};
}
};
验证器被定义为需要 ngModel
的指令,因此要应用验证器,只需将自定义指令添加到输入表单控件即可。
<form name="form">
<input type="text"
ng-model="model"
name="model"
my-validator>
<pre ng-bind="'my-validator returned: ' + form.model.$valid"></pre>
</form>
并且 my-validator
不必应用于本机表单控件。它可以是任何元素,只要它的属性为 ng-model
即可。当你有一些自定义构建 ui 组件时,这很有用。