Directive Info

This directive executes at priority level 0.

Usage

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

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	Adds `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 $viewValue 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 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$')`. 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.
ngChange (optional)	string	Angular expression to be executed when input changes due to user interaction with the input element.
ngTrim (optional)	boolean	If set to false Angular will not automatically trim the input. This parameter is ignored for input[type=password] controls, which will never trim the input. (default: true)

Example

Edit in Plunker

<script>
  angular.module('textInputExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.example = {
        text: 'guest',
        word: /^\s*\w*\s*$/
      };
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>Single word:
    <input type="text" name="input" ng-model="example.text"
           ng-pattern="example.word" required ng-trim="false">
  </label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.pattern">
      Single word only!</span>
  </div>
  <tt>text = {{example.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/>
 </form>

var text = element(by.binding('example.text'));
var valid = element(by.binding('myForm.input.$valid'));
var input = element(by.model('example.text'));

it('should initialize to model', function() {
  expect(text.getText()).toContain('guest');
  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 multi word', function() {
  input.clear();
  input.sendKeys('hello world');

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