Как создать директиву для проверки формы удаленно?

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

Вы можете сделать это статическим способом, просто сделав свое действие отправки, подождите, пока сервер проверит ваше поле. Однако лучшим подходом было бы добавление $asyncValidator на ваш ngModel. Это функция, выпущенная в выпуске 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 
      }; 
     } 
     } 
    }); 

ОБНОВЛЕНИЕ

Пример:

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