如何创建一个指令来远程验证表单

How to create a directive to validate form remotely?

本文关键字：程验证 表单 验证 指令 何创建 创建 一个      更新时间：2023-09-26

我正在创建一个远程验证指令，允许我检查我的服务器，如果字段被验证。

到目前为止，我有这个:

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');
                    }
                })
            }
        }
    });

For clearance Query是我自己的API服务，基本上它控制$http requests。

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

然而，我不太确定如何从这个指令到达表单。

有谁知道我如何做到这一点，以防止用户提交表单之前，我的远程验证检查?

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

相关文章：