AngularJS：列出所有表单错误

背景：我目前正在使用标签工作的应用程序; 我想列出未通过validation的字段/部分，以指导用户在正确的选项卡中查找错误。

所以我试图利用form.$error来做到这一点; 但我不完全得到它的工作。

如果validation错误发生在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”：{}
   }
 ]} 

另一方面，如果validation错误发生在这个ng-repeat ：

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

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

  {“required”：[{}]} 

但是，我期望以下内容：

  {“required”：[{'iname'：{}}]} 

任何想法，为什么元素的名称是失踪？

一个正在运行的plunkr可以在这里find： http ://plnkr.co/x6wQMp

Answer 1

正如@ c0bra在注释中指出的那样form.$error对象被填充，它不会像JSON那样被抛出。

通过form.$errors循环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上。

另一个select是使用这个问题的解决scheme之一来为dynamic创build的input分配唯一的名称。

Answer 2

我做了一个你传递给表单的函数。 如果有表单错误，它将显示在控制台中。 它显示的对象，所以你可以看看。 我把它放在我的保存function。

 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给出的答案。 这也可能有助于你想要去控制器路线的一些人。 顺便说一句，我使用toaster指令来显示我的用户validation消息。

  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(); } }) }); }