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 包含以下内容：

{ “必需的”： [ { “inumber”：{} }, { “inumber”：{} } ] }

另一方面，如果验证错误发生在ng-repeat之外：

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

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

{ "必需": [ {} ] }

然而，我希望得到以下结果：

{ “必需”：[ {'iname': {} } ] }

关于为什么缺少元素名称的任何想法？

可以在此处找到正在运行的 plunkr： http://plnkr.co/x6wQMp

Answer 1

正如@c0bra 在 cmets 中指出的那样，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 中的一种解决方案为动态创建的输入分配唯一名称。

Answer 2

我创建了一个函数，您可以将表单传递给该函数。如果有表单错误，它将在控制台中显示。它显示了对象，以便您查看。我把它放在我的保存功能中。

function formErrors(form){
  var errors = [];
  for(var key in form.$error){
    errors.push(key + "=" + form.$error);
  }
  if(errors.length > 0){
    console.log("Form Has Errors");
    console.log(form.$error);
  }
};

Answer 3

布雷特·德伍迪的回答是正确的。不过，我想在我的控制器中执行逻辑。所以我写了以下内容，这是基于 user5045936 给出的答案。这也可以帮助一些想要走控制器路线的人。顺便说一句，我使用 toaster 指令来显示我的用户验证消息。

 if (!vm.myForm.$valid) {
            var errors = [];

            for (var key in vm.myForm.$error) {
                for (var index = 0; index < vm.myForm.$error[key].length; index++) {
                    errors.push(vm.myForm.$error[key][index].$name + ' is required.');
                }
            }

            toaster.pop('warning', 'Information Missing', 'The ' + errors[0]);

            return;
        }

Answer 4

如果您有嵌套表单，那么您会发现这很有帮助：

 function touchErrorFields(form) {
    angular.forEach(form.$error, function (field) {
      angular.forEach(field, function(errorField) {
        if (!errorField.hasOwnProperty('$setTouched')) {
          touchErrorFields(errorField);
        } else {
          errorField.$setTouched();
        }
      })
    });
  }