AngularJs自定义表单验证
如何按照自己的需求来做好ng的表单验证,不多说直接上例子
<h1>自定义表单验证->限定只能输入偶数</h1> <form name="myForm" ng-app="app" ng-controller="test"> <div class="form-group"> <div col-md-4> <label class="control-label">数字:</label> </div> <div col-md-8> <input type="number" name="test" ng-model="data.even" even/> <div ng-show="myForm.test.$error.even">必须是偶数</div> </div> </div> </form>
指令
app.directive("even",function() {
return{
require: 'ngModel',//这个require,我简单的理解为继承的意思把。对应link函数中的第四个参数
link:function(scope, element, attrs, ngModelController) {
ngModelController.$parsers.push(function (viewValue) { //ngModel的双向绑定机制,
//$parser 这个服务是,从ViewModel->ModelView里面来。
if (viewValue % 2 === 0) {
ngModelController.$setValidity("even", true);
} else {
ngModelController.$setValidity("even", false);
}
return viewValue; //处理完之后,要把值返回
});
}
}
});
欢迎大家学习分享,谢谢
终极目标:世界大同