验证摘要

Question

我有一个Angular表单（称为saveForm），它有一堆文本输入，用于绑定到名为billingAddress的变量。每个输入看起来像这样：

<div class="col-md-4 col-sm-4">
    <div class="editor-label">
        <label for="billName">Name*</label>
    </div>
    <div>
        <input type="text" class="form-control" title="{{billingAddress.name}}"
               id="billName" name="billName" ng-model="billingAddress.name" required />
        <span class="field-validation-error"
              ng-show="saveForm['billName'].$error.required">
            {{saveForm['billName'].$error.message}}
        </span>
    </div>
</div>

显然，我还有更多输入（每个输入都有不同的名称，如name="billAddress1"或name="billCity"）。这些都在UI Bootstrap <accordion>中。在<accordion-heading>中，如果与帐单邮寄地址相关的任何表单验证失败，我想显示一条消息。但我有很多输入，我想避免这个目前膨胀的解决方案：

<accordion-heading>
    Billing Address &nbsp;&nbsp;&nbsp;
    <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': billingAccordionObj.open
                                             , 'glyphicon-chevron-right': !billingAccordionObj.open}">
    </i>
    &nbsp;&nbsp;&nbsp;
    <span class="field-validation-error" ng-show="saveForm['billName'].$error.required
                                                || saveForm['billAddress1'].$error.required
                                                || saveForm['billCity'].$error.required"
                                                ... all the other fields>
        Invalid Billing Address
    </span>
</accordion-heading>

是否有更优雅的方法可以针对与我的billingAddress对象关联的任何错误显示此摘要？或者我难以输入输入字段的所有名称？

Answer 1

使用表单并使用表单验证的$error属性而不是每个单个输入字段的验证：

<form name="MyForm">
  <input name="name" ng-model="m.name" required>
  <input type="number" min="1" name="age" ng-model="m.age" required>
</form>

如果您只获得了required验证的输入字段，而无法进行其他验证：

 <span ng-show="MyForm.$error.required.length">Invalid</span>

如果存在其他验证或您想要一个imo clean解决方案，请定义一个过滤器以检查表单是否有效：

app.filter('isInvalid', function() {
  return function(form) {
    return Object.keys(form.$error).length;
  }
})

 <span ng-show="MyForm | isInvalid">Invalid</span>

Plunker：http://plnkr.co/edit/h63atRf4m4qcFxnlD5JN?p=preview

修改

如果您只想在特定字段无效时显示验证消息，则只能执行以下操作：

app.filter('validateFields', function() {
  return function(form, fields) {
    for(var i = 0; i < fields.length; i++) {
      if(form[fields[i]].$invalid) {
        return false;
      }
    }

    return true;
  }
})

<div ng-show="!(MyForm | validateFields : ['street', 'city'])">Invalid</div>

Plunker：http://plnkr.co/edit/Dn6Cb0XYHDOTmpMwKNpp?p=preview