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

I want to validate a group of inputs on my form. I don't need individual names, so I tried to use form.name.$valid to check all.

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

I pushed a number to a array to increment the number of inputs. The problem is when I remove an input the validity of the inputs become wrong.

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

Here is a fiddle showing this issue.

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

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

To reproduce the problem, fill the first input. Inputs valid, form valid. Add an input and fill it too. Both valid again. Remove the last input, inputs invalid, form valid.

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

How can I validate using this type of dynamic form? I will need to use ng-form with individual messages even I want just one error message for all inputs?

如何使用此类动态表单进行验证?我需要使用带有单个消息的ng-form,即使我只想为所有输入发送一条错误消息?

3 个解决方案

#1

Here is (a simlified version of) what is going on:

这是(一个简化的版本)发生了什么:

When adding an input to the form, it "registers" itself as a form's control (which means it is taken into account when determining the form's validity).

在向表单添加输入时,它会将自己“注册”为表单的控件(这意味着在确定表单的有效性时会将其考虑在内)。
Additionally, it becomes available under formsName.inputsName. (Note, (2) is totally independent from (1), meaning that a control will still play a role in form's validity even if not accessible under formsName.inputsName.)

此外,它在formsName.inputsName下可用。 (注意,(2)完全独立于(1),这意味着即使在formsName.inputsName下无法访问,控件仍将在表单的有效性中发挥作用。)

As a result of the above (and the fact that all inputs have the same name), only the last added input will be available under formsName.inputsName, but all inputs will be taken into account when determining the form's validity. Now, when the last input is removed, formsName.inputsName is "unset", thus formsName.inputsName.$valid/$invalid will always evaluate to a falsy value.

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

Summing up:

formsName.$valid/$invalid will always be accurate and reflect the actual validity state of the form (based on the currently present inputs).

formsName。$ valid / $ invalid将始终准确并反映表单的实际有效性状态(基于当前存在的输入)。
formsName.inputsName.$valid/$invalid will either refer to the last input's validity state or be undefined (depending on which action was most recenty performed: adding an input vs removing an input).

formsName.inputsName。$ valid / $ invalid将引用最后一个输入的有效状态或未定义(取决于最近执行的操作:添加输入与删除输入)。

_{BTW, it is always a good idea to use formsName.$error and/or formsName.inputsName.$error when debugging forms, since they are more informative than $valid/$invalid.
Optionally, combine with <pre> and the json filter for premium form-debugging experience ;)}

顺便说一下,调试表单时使用formsName。$ error和/或formsName.inputsName。$ error总是一个好主意,因为它们比$ valid / $ invalid更有用。 (可选)与

和json过滤器结合使用,以获得优质的表单调试体验;)

_{E.g.: <pre>form.$error: {{ form.$error | json }}</pre>}

例如:

表格。$ error:{{form。$ error | json}}

#2

No idea why, but using !$invalid instead of $valid seems to work.

不知道为什么,但使用!$ 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>

Who can explain how ($valid) != (!$invalid)?

谁能解释一下($ valid)!=(!$无效)?

#3

Problem is probably related to the fact that your generating multiple fields with the same name and then trying to address them all at once with that name.

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

form.$invalid

Should be used when checking the whole form while

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

form.aFieldName.$invalid

Should be used when addressing a specific field, and their for you should not give multiple field the same name.

在处理特定字段时应该使用它们,并且它们对于您不应该给多个字段指定相同的名称。

I have created a updated version of your jsfiddle, that uses dynamicly generated names which allows you to address individual fields: http://jsfiddle.net/jenrikforlife/Lu4gwxww/

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

#1