Angular show errors only when input not empty and invalid

Question

I'm trying to toggle an error area on my form that only triggers once there is some input, it's a bit silly to have the errors all appear if the user hasn't started typing yet.

<form name="registerForm">
  <input type="email" name="email" ng-model="email" required />
</form>

<span ng-show="registerForm.email.$invalid">
  Invalid email.
</span>

This works fine once I'm typing but I want it to show no errors if the input is empty. I've tried using the model ng-hide="!email.length" but can't get it to work.

adrichman · Accepted Answer · 2014-05-05 00:01:00Z

2

<span ng-show="registerForm.email.$invalid && registerForm.email.$dirty>

answered May 5, 2014 at 0:01

adrichman

1,23510 silver badges17 bronze badges

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

2 Comments

Marcus Over a year ago

The problem with this is that if the user clears the input field after having entered characters, dirty will still be false and it will show the invalid message still.

George Over a year ago

as a quick fix i used: && !registerForm.get('email').hasError('required') (using angular 6 validation), to solve the above problem. not very clean tho.

KP87 · Accepted Answer · 2017-08-11 10:19:59Z

0

Try this:

<span ng-show="registerForm.email.$invalid && email>

answered Aug 11, 2017 at 10:19

KP87

911 silver badge2 bronze badges

Collectives™ on Stack Overflow

Angular show errors only when input not empty and invalid

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related