Question

我有一组数据字段。它们看起来像这样：

// Read-Only
<div class="field-group" ng-if="feature.edit == false">
    <div class="label" ng-class="{'feature-required': field.Validations.Required === true}">{{field.Label}}</div>
    <div class="value">{{field.Value}}</div>
</div>


// Editor
<div class="field-group" ng-show="feature.edit == true">
    <label for="F{{field.FieldID}}">
        <span ng-class="{'feature-required': field.Validations.Required === true, 'feature-notrequired': field.Validations.Required === false}">{{field.Label}}</span>

        <input type="text"
               id="F{{field.FieldID}}"
               name="F{{field.FieldID}}"
               ng-change="onFieldUpdate()"
               ng-model="field.Value"
               jd-field-attributes attr-field="field"
               jd-validate on-error="onFieldError"
               field="field">
    </label>

</div>

feature.edit由按钮控制，您可以将数据读取为可读或可编辑的。每个字段都有一些验证，通常，如果需要，它必须不同于null。我想点击编辑并输入字段后触发验证。一种方法是遍历所有输入字段并使用jQuery 触发器（＆＃34;更改＆＃34;）。我必须做一些延迟（它需要Angular填充所有字段）。在输入变得可见之后，有没有办法触发 ng-change 或运行 onFieldUpdate（）？我尝试过 ng-init ，但它没有用。

Answer 1

您可以将验证逻辑移至ngModel $validators管道中的自定义验证程序。添加到此管道的函数将在每次更改时根据输入模型值进行评估，并自动将相关的有效/无效类添加到输入。

以下是如何添加自定义验证器的示例：

app.directive('moreValidation', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attributes, ngModel) {
      ngModel.$validators.first = function(input) {
        return true; // add your custom logic here
      }

      ngModel.$validators.second = function(input) {
        return true;
      }

      ngModel.$validators.third = function(input) {
        return true; 
      }
    }
  };
});

// markup
<input type="text" ng-model="modelObject" more-validation />

这是一个小型的plnkr示例：http://plnkr.co/edit/mKKuhNqcnGXQ4sMePrym?p=preview

AngularJS在表单加载后触发字段验证

1 个答案: