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

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发布的一个特性。

通过使用此解决方案你可以使用角度形式atributes赶验证错误：

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

UPDATE

例子：

<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>