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


input[text]

  1. - input in module ng

Standard HTML text input with angular data binding.

Directive Info

  • This directive executes at priority level 0.

Usage

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

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

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.

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.

ngTrim
(optional)
boolean

If set to false Angular will not automatically trim the input.

Example

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