验证总结

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"）。这些都在UIBootstrap<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 干净的解决方案，请定义一个过滤器来检查表单是否有效：

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

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

笨蛋：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>

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

验证总结

Summary of validation

angularjs

angular-ui-bootstrap