Question

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

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

这是一个显示此问题的小提琴。

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

如何使用此类动态表单进行验证？我需要使用带有单个消息的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

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

在表单中添加输入时，它会注册＆＃34;它本身就是一种形式的控制（这意味着它在确定形式的有效性时会被考虑在内）。
此外，它在formsName.inputsName下可用。（注意，（2）完全独立于（1），这意味着即使在formsName.inputsName下无法访问，控件仍将在形式的有效性中发挥作用。）

由于上述情况（以及所有输入具有相同名称的事实），formsName.inputsName下只有最后添加的输入可用，但在确定表格时将考虑所有输入＆＃ 39;有效期。现在，当删除最后一个输入时，formsName.inputsName是＆＃34;取消设置＆＃34;，因此formsName.inputsName.$valid/$invalid将始终评估为假值。

总结：

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

<子> 顺便说一句，在调试表单时使用formsName.$error和/或formsName.inputsName.$error始终是个好主意，因为它们比$valid/$invalid更具信息性。
（可选）与<pre>和json过滤器结合使用，以获得优质的表单调试体验;）

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

Answer 3

问题可能与您生成多个具有相同名称的字段然后尝试使用该名称一起解决所有字段有关。

form.$invalid

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

form.aFieldName.$invalid

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

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

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

3 个答案: