<body ng-app="app">

  <script type="text/ng-template" id="generic-messages">
    <p ng-message="required" class="error-msg">This field is required.</p>
    <p ng-message="minlength" class="error-msg">This field is too short.</p>
    <p ng-message="maxlength" class="error-msg">This field is too long.</p>
  </script>

  <form name="formValidation">

    <label>Username (Using Dirty)</label>
    <input type="text" name="username" ng-model="inputName" ng-minlength="6" ng-maxlength="12" ng-pattern="/^\w+$/" required>
    <div ng-messages="formValidation.username.$error" ng-show="formValidation.username.$dirty">
      <p ng-message="pattern" class="error-msg">Username can only be alphanumeric with an optional underscore.</p>
      <p ng-message="maxlength" class="error-msg">Username cannot be longer than 12 characters.</p>
      <div ng-messages-include="generic-messages"></div>
    </div>

    <label>Password (Using Touched)</label>
    <input type="text" name="userPassword" ng-model="inputPassword" ng-minlength="6" ng-maxlength="12" required>
    <div ng-messages="formValidation.userPassword.$error" ng-show="formValidation.userPassword.$touched">
      <div ng-messages-include="generic-messages"></div>
    </div>

    <label>Email (Using Dirty)</label>
    <input type="email" name="userEmail" ng-model="inputEmail" required>
    <div ng-messages="formValidation.userEmail.$error" ng-show="formValidation.userEmail.$dirty">
      <p ng-message="required" class="error-msg">This field is required.</p>
      <p ng-message="email" class="error-msg">Please enter a valid email address.</p>
    </div>
  </form>
</body>
body {
  font-family: 'Lato';
  margin: 20px;
  font-weight: 400;
}

label {
  color: #555;
  font-weight: bold;
  margin-right: 10px;
  display: block;
}

input {
  border: 2px solid #2196F3;
  width: 300px;
  outline: none;
  padding: 4px;
  border-radius: 5px;
  margin: 5px 0 10px 0;
}

p {
  color: red;
  font-weight: bold;
  padding: 0;
  margin: 5px 0 25px 0;
}

.error-msg.ng-enter {
  transition: 0.5s linear all;
  opacity: 0;
}
.error-msg.ng-enter.ng-enter-active {
  opacity: 1;
}
angular.module('app', ['ngMessages', 'ngAnimate']);

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300,400

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-messages.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-animate.min.js