AngularJS：列出所有表单错误

Posted 2023-03-05

【中文标题】AngularJS：列出所有表单错误

【英文标题】：AngularJS: list all form errors

【发布时间】：2014-04-14 21:35:25

【问题描述】：

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

所以我尝试利用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

【问题讨论】：

前几天我注意到了这一点。这对我来说没有意义，因为您可以检查 form.iname.$error 并获得正确的值。我最终做的是使用form.$valid 来检查有效性并启用提交按钮。

您好 Ed 非常感谢您的回复。我同意，但我想告诉用户哪个控件无法验证。该表单位于选项卡式视图中，因此很容易错过您无法保存的信息，因为您当前未查看的选项卡中的重复中存在验证错误。 （我希望我的解释足够好：））

是的，我同意向用户展示什么是有效的，什么是无效的。一种选择是您可以在<span> 标记中为每个可能的错误添加错误文本，例如使用ng-show="form.fieldName.$error.required"。然后，您可以将它们与输入内联，或者将它们放在提交按钮附近。不过这绝对不理想 - 我想知道未填充的 $error 值是否是有角度的错误？

我相信 $error 被填充了，你不能把它作为 JSON 很好地转储。看这里：plnkr.co/edit/Z47J2W?p=preview 错误类型都可以迭代。

c0bra：谢谢，我会尝试按照您的解决方案，看起来它完全符合我的需要。

【参考方案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 中的一种解决方案为动态创建的输入分配唯一名称。

【讨论】：

注意：标签必须具有name 属性才能返回名称。如果您倾向于不分配名称标签，因为角度，它将在 e.$name 处返回空白@

太棒了！！。非常感谢

【参考方案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);
  
;

【参考方案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;
        

【参考方案4】：

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

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

【讨论】：

这个解决方案非常适合在嵌套表单上递归显示错误，谢谢！

@NicolasLeucci，不客气！很高兴它对您有所帮助

使用 angularjs 1.6.2，errorField.hasOwnProperty('$setTouched') 返回 false。