양식을 원격으로 검증하는 지시문을 작성하는 방법은 무엇입니까?

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> 

현재 비동기 검증을 구현하는 방법에 대해 읽을 수 있습니다