Question

我正在创建一个远程验证指令，允许我检查字段是否已经过验证。

到目前为止，我有这个：

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。

现在，当我将此属性指令添加到输入字段时，我想确保一旦开始验证它将表单设置为无效。

但是，我不太确定如何从该指令中获取表格。

有人知道如何阻止用户在检查远程验证之前提交表单吗？

Answer 1

您可以通过让提交操作等待服务器验证您的字段，以静态方式执行此操作。但是，更好的方法是在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>

如何创建指令以远程验证表单？

1 个答案: