AngularJS Input Type Email

The AngularJS input types are HTML input element control and used togather with ng-model directive. AngularJS input type Email can be decorate with various AngularJS arguments like name, ng-required, ng-minlength,ng-maxlength,ng-pattern and ng-change.

Syntax

<input type="email"
       ng-model="string"
       [name="string"]
       [required="string"]
       [ng-required="string"]
       [ng-minlength="number"]
       [ng-maxlength="number"]
       [pattern="string"]
       [ng-pattern="string"]
       [ng-change="string"]>

AngularJS Input Type Email Arguments

Here is a list of AngularJS Input Type Email Arguments.

Directives	Description
ng-model	AngularJS expression to bind the email.
name (optional)	Name of the control input control.
ng-minlength (optional)	AngularJS expression sets the min validation constraint to the email.
ng-maxlength (optional)	AngularJS expression sets the max validation constraint to the email.
ng-pattern (optional)	Validate input type email with given match pattern.
required (optional)	Validate input type email is required.
ng-required (optional)	AngularJS expression ngRequired expression evaluates to true.
ng-change (optional)	AngularJS expression to be executed when input value changes.

AngularJS Input Type Email Example

<!DOCTYPE html>  
<html>  
<head> <!-- www.techstrikers.com -->  
<title>Email Test Sample</title>  
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>   
   <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>  
<script>  
  var app = angular.module('emailInputExample', [])  
     app.run(function($rootScope){  
      $rootScope.angular = angular;  
    })  
     app.controller('EmailController', ['$scope', function($scope) {  
       $scope.example = {  
         email: 'jimi@domain.com'
         };  
         
     }]);  
</script>  
</head>  
<body style="background-color:#DDE4E9;">  
  <fieldset style="background-color:#DDE4E9;">    
    <legend>AngulerJS Input Type Email Example</legend>    
<div ng-app="emailInputExample">  
    <form name="myForm" ng-controller="EmailController">  
       <label for="exampleInput">Enter Email</label>  
       <input type="email" name="input" ng-model="example.email" required />  
        <p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;"   
        ng-if='!myForm.input.$valid'>Enter Valid Email</p>    
    </form>  
</div>  
      </fieldset>   
</body>  
</html>

Above example will produce following output