angular form stops on first validation error leaving $error in incorrect state

Question

I have an email field in my form that is validated for both being not empty and a valid email. The code is as follows (see plunker - Angular 1.3.0-beta.13):

<form name="myForm" novalidate>
  <input type="email" name="email" ng-model="email" required>
  <span ng-show="myForm.email.$error.required">Missing Email</span> |
  <span ng-show="myForm.email.$error.email">Invalid Email</span>
  <pre>myForm.email.$error: {{  myForm.email.$error | json }}</pre>
</form>

When started, only the "Missing Email" message is shown, as expected. When I start typing in the input, both messages Missing Email and Invalid Email are shown even if the field is not empty! This is not expected.

enter image description here

When typing a valid email, both errors disappear, as expected:

enter image description here

When getting from the valid email state to invalid email state (by delete characters), only the invalid email message shows, as expected:

enter image description here

It seems that angular stops on the first validation violation leaving the $error object in a stale state.

Is this a bug in the framework? am I missing something here?

You might be missing something. This is working as expected in this plunkr. — Sunil D.
– Sunil D., Commented Jun 20, 2014 at 19:09
There won't be a value saved in the model value until there is a "valid" value, so therefore the value of email is undefined until you type something. The reason it works the second time is because there is still a value for the model after putting the space. Just add a {{ email}} to see the output in real time and you will see. — JoseM
– JoseM, Commented Jun 20, 2014 at 19:21
@JoseM any documentation or rationale on why the model generated by the form for the input fields is not updated? Even if the model is not updated I still expect the validation rules to run to completion and not stop and leave a stale $error object — nakhli
– nakhli, Commented Jun 20, 2014 at 19:32

nakhli · Accepted Answer · 2014-06-21 09:13:07Z

0

This is a bug in angularjs 1.3.0 beta (up to beta.13 at least). A pull request is pending.

answered Jun 21, 2014 at 9:13

nakhli

4,0796 gold badges41 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular form stops on first validation error leaving $error in incorrect state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related