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>

我想在更改品牌价值后触发验证功能。正如你所看到的，我试图使用$ 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>

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

1 个答案: