Improve this Doc View Source

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

Note: `input[email]` uses a regex to validate email addresses that is derived from the regex used in Chromium. If you need stricter validation (e.g. requiring a top-level domain), you can use `ng-pattern` or modify the built-in validators (see the Forms guide)

## Directive Info

- This directive executes at priority level 0.

## Usage

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

### Arguments

Param | Type | Details
--- | --- | ---
ngModel | string | 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. Setting the attribute to a negative or non-numeric value, allows view values of any length.
pattern (optional) | string | Similar to `ngPattern` except that the attribute value is the actual string that contains the regular expression body that will be converted to a regular expression as in the ngPattern directive.
ngPattern (optional) | string | Sets `pattern` validation error key if the ngModel value does not match a RegExp found by evaluating the Angular expression given in the attribute value. If the expression evaluates to a RegExp object then this is used directly. If the expression is a string then it will be converted to a RegExp after wrapping it in `^` and `$` characters. For instance, `"abc"` will be converted to `new RegExp('^abc$')`.
ngChange (optional) | string | Angular expression to be executed when input changes due to user interaction with the input element.

## Example

Edit in Plunker

    <script>
      angular.module('emailExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.email = {
            text: 'me@example.com'
          };
        }]);
    </script>
      <form name="myForm" ng-controller="ExampleController">
        Email: <input type="email" name="input" ng-model="email.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 = {{email.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>

    var text = element(by.binding('email.text'));
    var valid = element(by.binding('myForm.input.$valid'));
    var input = element(by.model('email.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');
    });