在 AngularJS 上使用 ng-repeat 验证动态表单

Question

我想验证我表单上的一组输入。我不需要单独的名字，所以我尝试使用 form.name.$valid 来检查所有。

我将一个数字推送到数组以增加输入的数量。问题是当我删除输入时输入的有效性变得错误。

这里 fiddle 显示了这个问题。

http://jsfiddle.net/n0w0cz4b/2/

要重现问题，请填写第一个输入。输入有效，表格有效。添加一个输入并填充它。两者都再次有效。删除最后一个输入，输入无效，表单有效。

如何使用这种类型的动态表单进行验证？我需要将 ng-form 与单个消息一起使用，即使我只希望所有输入都显示一条错误消息？

Answer 1

不知道为什么，但使用 !$invalid 而不是 $valid 似乎有效。

<p style="color : green" ng-show="!form.box.$invalid">Inputs are valid.</p>
<p style="color : red" ng-show="form.box.$invalid">Inputs are invalid.</p>
<p style="color : green" ng-show="!form.$invalid">Form is valid.</p>
<p style="color : red" ng-show="form.$invalid">Form is invalid.</p>

谁能解释一下($valid) != (!$invalid)？

Answer 2

问题可能与以下事实有关：您生成多个具有相同名称的字段，然后尝试使用该名称一次解决所有这些问题。

form.$invalid

检查整个表格时应该使用 while

form.aFieldName.$invalid

应在寻址特定字段时使用，并且它们不应该为多个字段提供相同的名称。

我已经创建了你的 jsfiddle 的更新版本，它使用动态生成的名称，允许你处理各个字段：http://jsfiddle.net/jenrikforlife/Lu4gwxww/

Answer 3

这是正在发生的事情（的简化版本）：

向表单添加输入时，它"registers"本身作为表单的控件（这意味着在确定表单的有效性时将其考虑在内）。
此外，它在 formsName.inputsName 下可用。（注意，(2) 完全独立于 (1)，这意味着即使在 formsName.inputsName 下无法访问，控件仍将在表单有效性中发挥作用。）

由于上述原因（以及所有输入具有相同名称的事实），只有最后添加的输入在 formsName.inputsName 下可用，但在确定输入时将考虑所有输入表格的有效性。现在，当删除最后一个输入时，formsName.inputsName 为 "unset"，因此 formsName.inputsName.$valid/$invalid 将始终计算为假值。

总结：

formsName.$valid/$invalid 将始终准确并反映表单的实际有效性状态（基于当前存在的输入）。
formsName.inputsName.$valid/$invalid 将引用最后一个输入的有效性状态或未定义（取决于最近执行的操作：添加输入与删除输入）。

_{顺便说一句，在调试表单时使用 formsName.$error and/or formsName.inputsName.$error 总是一个好主意，因为它们比 $valid/$invalid.
提供更多信息
可选地，结合 <pre> 和 json 过滤器以获得高级表单调试体验；）}

_{例如：<pre>form.$error: {{ form.$error | json }}</pre>}

在 AngularJS 上使用 ng-repeat 验证动态表单

Validation of dynamic form using ng-repeat on AngularJS

html

forms

validation

angularjs