Improve this Doc View Source

## Overview

ngPattern adds the pattern `validator` to `ngModel`. It is most often used for text-based `input` controls, but can also be applied to custom text-based controls.

The validator sets the `pattern` error key if the `ngModel.$viewValue` does not match a RegExp which is obtained from the `ngPattern` attribute value:

- the value is an AngularJS expression:
  - If the expression evaluates to a RegExp object, then this is used directly.
  - If the expression evaluates to 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$')`.
- If the value is a RegExp literal, e.g. `ngPattern="/^\d+$/"`, it is used directly.

Note: Avoid using the `g` flag on the RegExp, as it will cause each successive search to start at the index of the last search's match, thus not taking the whole input value into account.
Note: This directive is also added when the plain `pattern` attribute is used, with two differences:

1. `ngPattern` does not set the `pattern` attribute and therefore HTML5 constraint validation is not available.
2. The `ngPattern` attribute must be an expression, while the `pattern` value must be interpolated.

## Directive Info

- This directive executes at priority level 0.

## Usage

- as attribute:

      <ANY
        ng-pattern="">
      ...
      </ANY>

### Arguments

Param | Type | Details
--- | --- | ---
ngPattern | expression RegExp | AngularJS expression that must evaluate to a `RegExp` or a `String` parsable into a `RegExp`, or a `RegExp` literal. See above for more details.

## Example

    <script>
      angular.module('ngPatternExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.regex = '\\d+';
        }]);
    </script>
    <div ng-controller="ExampleController">
      <form name="form">
        <label for="regex">Set a pattern (regex string): </label>
        <input type="text" ng-model="regex" id="regex" />
        <br>
        <label for="input">This input is restricted by the current pattern: </label>
        <input type="text" ng-model="model" id="input" name="input" ng-pattern="regex" /><br>
        <hr>
        input valid? = <code>{{form.input.$valid}}</code><br>
        model = <code>{{model}}</code>
      </form>
    </div>

    var model = element(by.binding('model'));
    var input = element(by.id('input'));

    it('should validate the input with the default pattern', function() {
      input.sendKeys('aaa');
      expect(model.getText()).not.toContain('aaa');

      input.clear().then(function() {
        input.sendKeys('123');
        expect(model.getText()).toContain('123');
      });
    });