我正在创建一个远程验证指令,允许我检查字段是否已经过验证。
到目前为止,我有这个:
angular.module('Form').directive('remoteFieldValidation', function (Query) {
return {
restrict: 'A',
scope: {
fieldValue: '=ngModel'
},
link: function (scope, element, attr) {
element.parent().addClass('has-feedback');
element.focusout(function (value) {
var value = scope.fieldValue;
var checker = attr.remoteFieldValidation;
if (value && checker) {
element.parent().append('<span class="form-control-feedback fa fa-spinner fa-spin" style="line-height: 35px"></span>');
Query.api2({
method: 'GET',
route: 'validateField',
params: {
value: value,
checker: checker
}
}).then(function (result) {
})
}
else {
console.log('Missing checker or value');
}
})
}
}
});
清除查询是我自己的API服务,基本上它控制$http requests
。
现在,当我将此属性指令添加到输入字段时,我想确保一旦开始验证它将表单设置为无效。
但是,我不太确定如何从该指令中获取表格。
有人知道如何阻止用户在检查远程验证之前提交表单吗?
答案 0 :(得分:2)
您可以通过让提交操作等待服务器验证您的字段,以静态方式执行此操作。但是,更好的方法是在ngModel
上添加$asyncValidator
。这是AngularJs 1.3发布的一个功能。
通过使用此解决方案,您可以使用角度形式属性来捕获验证错误:
<div ng-show="form.myField.$error.myRemoteValidator">The value is not valid!</div>
或者像这样使用ngMessages
:
<div ng-messages="form.myField.$error">
<div ng-message="myRemoteValidator">The value is not valid!</div>
</div>
您的指令如下:
angular.module('Form')
.directive('remoteFieldValidation', function(Query, $q) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ngModelCtrl) {
ngModelCtrl.$asyncValidators
.myRemoteValidator = function(modelValue, viewValue) {
var value = modelValue || viewValue;
var checker = attr.remoteFieldValidation;
return Query.api2({
method: 'GET',
route: 'validateField',
params: {
value: value,
checker: checker
}
}).then(function(result) {
if (result.isValid) {
// it says to validator that it's valid
return true;
} else {
// it says to validator that it's not valid
// and also send the error message
return $q.reject('Invalid field');
}
}, $q.reject); // invalidate in case of any errors on your api or request
};
}
}
});
<强>更新
示例:
<form name="form">
...
<input type="text" ng-model="myField" remote-field-validation>
<div ng-messages="form.myField.$error">
<div ng-message="myRemoteValidator">The value is not valid!</div>
</div>
...
<button ng-disabled="form.$invalid">Save</button>
</form>