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

【问题标题】：AngularJS trigger field validation after form loads表单加载后AngularJS触发字段验证
【发布时间】：2016-01-28 17:18:12
【问题描述】：

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

// 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 trigger("change")。我必须做一些延迟（它需要 Angular 来填充所有字段）。在输入变得可见后，有什么方法可以触发 ng-change 或运行 onFieldUpdate()？我尝试过 ng-init，但没有成功。

【问题讨论】：

您是否尝试过使用实际的
并检查 $pristine、$dirty 等？
您还可以绑定您的验证类逻辑以包含您的 feature.edit 标志。这可能是您正在寻找的：(field.Validations.Required === true && feature.edit == true)
为什么不用angular的标准验证指令：required、ng-required等？
ng-required="feature.edit"
难道你不能在你的 feature.edit 上也使用 $watch 并且当它变为 true 时，触发 onFieldUpdate() 函数吗？ docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch

标签： angularjs validation angularjs-validation

【解决方案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

【讨论】：