如何創建一個指令來遠程驗證表單？

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>