AngularJS: API: ng/directive/input[email]


input[email]

  1. - input in module ng

Text input with email validation. Sets the email validation error key if not a valid email address.

Directive Info

  • This directive executes at priority level 0.

Usage

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

Arguments

ParamTypeDetails
ngModelstring

Assignable angular expression to data-bind to.

name
(optional)
string

Property name of the form under which the control is published.

required
(optional)
string

Sets required validation error key if the value is not entered.

ngRequired
(optional)
string

Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.

ngMinlength
(optional)
number

Sets minlength validation error key if the value is shorter than minlength.

ngMaxlength
(optional)
number

Sets maxlength validation error key if the value is longer than maxlength.

ngPattern
(optional)
string

Sets pattern validation error key if the value does not match the RegExp pattern expression. Expected value is /regexp/ for inline patterns or regexp for patterns defined as scope expressions.

ngChange
(optional)
string

Angular expression to be executed when input changes due to user interaction with the input element.

Example

index.html
<script>
angular.module('emailExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.text = 'me@example.com';
  }]);</script><form name="myForm" ng-controller="ExampleController">
  Email: <input type="email" name="input" ng-model="text" required>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!</span>
  <span class="error" ng-show="myForm.input.$error.email">
    Not valid email!</span>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/></form>
protractor.js
var text = element(by.binding('text'));var valid = element(by.binding('myForm.input.$valid'));var input = element(by.model('text'));

it('should initialize to model', function() {
  expect(text.getText()).toContain('me@example.com');
  expect(valid.getText()).toContain('true');});

it('should be invalid if empty', function() {
  input.clear();
  input.sendKeys('');
  expect(text.getText()).toEqual('text =');
  expect(valid.getText()).toContain('false');});

it('should be invalid if not email', function() {
  input.clear();
  input.sendKeys('xxx');

  expect(valid.getText()).toContain('false');});