current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 1 down vote favorite

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.

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?

share|improve this question

3 Answers 3

up vote 1 down vote accepted

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

  1. 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).

  2. 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.)

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.

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.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).

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

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

share|improve this answer
up vote 0 down vote

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

<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)?

share|improve this answer
    
Wow! This is weird. I will wait for answers, but it sounds like a bug to me. – rcorreia Feb 24 at 17:31
    
There is another problem and even $invalid won't address it. Add two inputs. Fill the first and the last one. Inputs valid, form invalid. – rcorreia Feb 24 at 17:36
    
@Rotem: As you said, it only seems to work. Hopefully my answer sheds some more light on what's going on :) – ExpertSystem Mar 22 at 9:15
up vote 0 down vote

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/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.