AngularJS:列出所有表单错误

Question

背景:我目前正在开发一个带有选项卡的应用程序；我想列出验证失败的字段/部分，以引导用户在右侧选项卡中查找错误。

所以我尝试利用 form.$error 来做到这一点；但我还没有完全让它发挥作用。

如果 ng-repeat 内发生验证错误，例如:

<div ng-repeat="url in urls" ng-form="form">
  <input name="inumber" required ng-model="url" />
  <br />
</div>

空值会导致 form.$error 包含以下内容:

{ "required": [  {    "inumber": {}  },  {    "inumber": {}  }] }

On the other hand, if validation errors occur outside this ng-repeat:

<input ng-model="name" name="iname" required="true" />

form.$error 对象包含以下内容:

{ "required": [ {} ] }

但是，我期望以下内容:

{ "required": [ {'iname': {} } ] }

关于元素名称缺失的原因有什么想法吗？

可以在这里找到正在运行的 plunkr: http://plnkr.co/x6wQMp

Answer 1

如@c0bra在评论中指出 form.$error 对象已填充，它只是不喜欢被转储为 JSON。

循环遍历 form.$errors 及其嵌套对象将获得所需的结果。

<ul>
  <li ng-repeat="(key, errors) in form.$error track by $index"> <strong>{{ key }}</strong> errors
    <ul>
      <li ng-repeat="e in errors">{{ e.$name }} has an error: <strong>{{ key }}</strong>.</li>
    </ul>
  </li>
</ul>

所有功劳都归c0bra关于这一点。

另一种选择是使用 this question 中的解决方案之一为动态创建的输入分配唯一的名称。