如何从自定义指令触发验证？

Question

我想触发我的，我在一个自定义指令定义了验证：

angular.module('app') 
    .directive('validPolicyNumber', function() { 
     return { 
      restrict: 'A', 
      scope:'=brand', 
      require: '?ngModel', 

      link: function (scope, element, attrs, ctrl) { 

       scope.$watch(scope.brand,function(){ 
        ctrl.$parsers.unshift(validate); 
        ctrl.$formatters.unshift(validate) 
       }); 
       function validate(value) { 
        var valid=false; 

        if (valid) { 
         ctrl.$setValidity('validPolicyNumber', true); 
         return value; 
        } 
        ctrl.$setValidity('validPolicyNumber', false); 
        return value; 
       } 
      } 
     } 
    }); 

在此输入更改值时，验证被触发：

<input valid-policy-number="claimSearch.brand.value" type="text" 
     class="form-control" ng-model="claimSearch.polNo" name="policyNumber" 
     id="polNo" placeholder="Policy Number" value="" required> 

然而，验证也依赖于另一个值，即在同一页上的品牌：

<select name="brand" id="brand" class="form-control" ng-model="claimSearch.brand" 
     ng-options="category as category.name for category in selectInputs.brand" 
     required> 
</select> 

我想验证函数触发onc e改变品牌价值。正如你所看到的，我试图用品牌价值的$ watch来确定这是否是正确的方法？当我更改组合框中的品牌价值时，如何才能验证工作？

Answer 1

为了在AngularJS中创建复杂的自定义检查，我推荐这个use-from-error。

在jsfidlle上的现场示例。

angular.module('ExampleApp', ['use', 'ngMessages']) 
 
    .controller('ExampleController', function($scope) { 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script> 
 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController"> 
 

 
    <form name="myForm" use-form-error="formInvalid" use-error-expression="digit==9"> 
 
     <div ng-messages="myForm.$error" style="color:maroon"> 
 
     <div ng-message="formInvalid">You form is not valid</div> 
 
     </div> 
 
     <label>Your number should be even, not divisible by three and should not be 6,7,9:</label> 
 
     <input type="text" ng-model="digit" name="myDigit" ng-minlength="1" ng-maxlength="20" required use-form-error="isEven" use-error-expression="digit%2==0" /> 
 
     <span use-form-error="isDividedThree" use-error-expression="digit%3==0" use-error-input="myForm.myDigit"></span> 
 
     <span use-form-error="formInvalid" use-error-expression="digit==7" use-error-input="myForm.myDigit"></span> 
 
     <span use-form-error="formInvalid" use-error-expression="digit==6"></span> 
 
     <pre>myForm.myDigit.$error = {{ myForm.myDigit.$error | json }}</pre> 
 

 
     <div ng-messages="myForm.myDigit.$error" ng-messages-multiple="true" style="color:maroon"> 
 
     <div ng-message="required">You did not enter a digit</div> 
 
     <div ng-message="minlength">Your digit is too short</div> 
 
     <div ng-message="maxlength">Your digit is too long</div> 
 
     <div ng-message="isEven">Your digit is even</div> 
 
     <div ng-message="isDividedThree">Your digit is divided by three</div> 
 
     </div> 
 
    </form> 
 

 
    </div> 
 
</div>