Showing errors after the user finishes typing with angularjs

I really like the inline form validation pattern: as the user finishes typing the validation on that input is immediately performed. This improve the user experience, by:

  • a 22% increase in success rates,
  • a 22% decrease in errors made,
  • a 31% increase in satisfaction rating,
  • a 42% decrease in completion times, and
  • a 47% decrease in the number of eye fixations. (source alistapart.)

Here is an example performed with just AngularJS directives:

<form action="" name="formName" class="col-lg-8 col-md-8 col-sm-12">
    <div class="form-group">
      <label for="fromEmail">From Email
        <span class="push-right label label-danger">
          <span ng-show="fromEmailEdited && formName.fromEmail.$error.email">Must be a valid email address.</span>
          <span ng-show="fromEmailEdited && formName.fromEmail.$error.required">This is a required field.</span>
        </span>
      </label>
      <input required type="email" id="fromEmail" name="fromEmail" class="form-control" ng-blur="fromEmailEdited = true" ng-model="branding.fromEmail" placeholder="johndoe@example.com" />
    </div>
  </form>

Here is the fiddle.