Angular/bootstrap show specific form validation message

Question

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.

Answer 1

Change the expression for required to

<label for="email">Email <small class="help-inline" ng-show="!form.email.$viewValue">

and it would work.

The problem with Angular is that it does not allow invalid data in the model. So unless you provide a valid email value the linked model property remains empty and both the required and email validation fail.