Angularjs 验证摘要

我有一个角度表单（称为

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>

---

对于与我的

billingAddress

对象关联的任何错误，是否有更优雅的方式显示此摘要？还是我一直在键入输入字段的所有名称？

使用表单并使用表单验证的

$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>

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

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

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

app.filter（'isInvalid'，function（）{
返回函数（形式）{
返回Object.keys（form.$error）.length；
}
})
无效的

普朗克：

编辑

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

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>

app.filter（'validateFields'，function（）{
返回函数（表单、字段）{
对于（变量i=0；i

---

Plunker:

好吧，那就好了，只是表单的其他部分有我不想与地址交互的其他验证。@Ryanyuu改进了我的答案，并添加了一种只显示特定字段的验证消息的方法。希望它适合你的需要。是的，我想重构成这样的函数是我必须处理的。谢谢

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

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

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>