<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-heroComponentSimple-production</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-messages.js"></script>
  <script src="index.js"></script>
  <script src="emailInput.js"></script>

</head>

<body ng-app="emailInputApp">

  <email-input></email-input>

</body>

</html>
(function(angular) {
  'use strict';
  angular.module('emailInputApp', ['ngMessages']);
})(window.angular);

(function(angular) {
  'use strict';

  function EmailInputController($log) {
    var ctrl = this;
    
    ctrl.$onInit = function() {
      //$log.debug("Email view value is: "+(ctrl.myForm.myEmailInput.$viewValue));
    };
    
    ctrl.sendEmail = function() {
      $log.debug("EmailInputController.sendEmail");
      $log.debug("Email view value is: "+(ctrl.myForm.myEmailInput.$viewValue));
    };
    
  }

  angular.module('emailInputApp').component('emailInput', {
    templateUrl: 'emailInput.html',
    controller: EmailInputController,
  });
})(window.angular);
<form name="$ctrl.myForm">
  <label>Email:</label>
  <input name="myEmailInput" type="email" ng-model="$ctrl.email" required maxlength="15" >
  <button type="button" ng-click="$ctrl.sendEmail()">Send Email</button>
  <p>Your Email addres is {{$ctrl.email}}</p>
  <div ng-messages="$ctrl.myForm.myEmailInput.$error" role="alert">
    <div ng-message="required">Please enter an email address.</div>
    <div ng-message="email">This field must be a valid email address.</div>
    <div ng-message="maxlength">This field can be at most 15 characters long.</div>
  </div>
  <code>
    {{$ctrl.myForm.myEmailInput | json}}
  </code>
</form>
# Customized Input validation

How to fully cusotmize input validation in an angular component.