I'd like to have a required email input on a form, and I'd like to augment the input's label to show validity with specific messages. I tried the markup below (simplified, and a few variants). The actual can be found at this fiddle illustrating the problem.
<label for="email">Email
<small class="help-inline" ng-show="form.email.$invalid-required"> (required)</small>
<small class="help-inline" ng-show="form.email.$invalid-email"> (email)</small>
</label>
<div class="input-group">
<input type="email" placeholder="Email" name="email"
ng-model="model.email" required>
I'd like the 'required' message to appear when the input is empty, and when it's non-empty, I'd like the 'email' message to appear conditionally if angular email validation passes.
As you'll see in the fiddle, both messages appear and disappear together, even though, as I use the chrome inspector, the $invalid classes on the input seem to change appropriately. This casts suspicion on the ng-show expression for the errors, but no matter what I try there I get the same behavior.
I've seen a couple answers (like this one) that use a lot of code, but that answer seems a little roundabout. I'm new to web, and already appalled by how bulky the html/code can get (each time I learn about a new streamlining idea, mine seems to double in size)
Thanks in advance.
