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": {}
  }
] }

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

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

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

{ "required": [ {} ] }

然而，我期待以下内容：

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

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

在这里可以找到一个跑步者： 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中的一个解决方案为动态创建的输入分配唯一的名称。

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

Brett DeWoody的回答是正确的。我想在我的控制器中做逻辑。所以我写了下面的内容，这是基于user5045936给出的答案。这也可以帮助一些想要进入控制器路线的人。顺便说一句，我使用多士炉指令来显示我的用户验证消息。

 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

If you have nested forms then you will find this helpful:

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

AngularJS：列出所有表单错误

4 个答案: