AngularJS: API: ng/directive/input


input

  1. - directive in module ng

HTML input element control with angular data-binding. Input control follows HTML5 input types and polyfills the HTML5 validation behavior for older browsers.

Directive Info

  • This directive executes at priority level 0.

Usage

  • as element: 
    <input
  ng-model=""
  [name=""]
  [required=""]
  [ng-required=""]
  [ng-minlength=""]
  [ng-maxlength=""]
  [ng-pattern=""]
  [ng-change=""]>
...
</input>

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)
boolean

Sets required attribute if set to true

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('inputExample', [])
     .controller('ExampleController', ['$scope', function($scope) {
       $scope.user = {name: 'guest', last: 'visitor'};
     }]);</script><div ng-controller="ExampleController">
  <form name="myForm">
    User name: <input type="text" name="userName" ng-model="user.name" required>
    <span class="error" ng-show="myForm.userName.$error.required">
      Required!</span><br>
    Last name: <input type="text" name="lastName" ng-model="user.last"
      ng-minlength="3" ng-maxlength="10">
    <span class="error" ng-show="myForm.lastName.$error.minlength">
      Too short!</span>
    <span class="error" ng-show="myForm.lastName.$error.maxlength">
      Too long!</span><br>
  </form>
  <hr>
  <tt>user = {{user}}</tt><br/>
  <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
  <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
  <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
  <tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
  <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
  <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br></div>
protractor.js
var user = element(by.binding('{{user}}'));var userNameValid = element(by.binding('myForm.userName.$valid'));var lastNameValid = element(by.binding('myForm.lastName.$valid'));var lastNameError = element(by.binding('myForm.lastName.$error'));var formValid = element(by.binding('myForm.$valid'));var userNameInput = element(by.model('user.name'));var userLastInput = element(by.model('user.last'));

it('should initialize to model', function() {
  expect(user.getText()).toContain('{"name":"guest","last":"visitor"}');
  expect(userNameValid.getText()).toContain('true');
  expect(formValid.getText()).toContain('true');});

it('should be invalid if empty when required', function() {
  userNameInput.clear();
  userNameInput.sendKeys('');

  expect(user.getText()).toContain('{"last":"visitor"}');
  expect(userNameValid.getText()).toContain('false');
  expect(formValid.getText()).toContain('false');});

it('should be valid if empty when min length is set', function() {
  userLastInput.clear();
  userLastInput.sendKeys('');

  expect(user.getText()).toContain('{"name":"guest","last":""}');
  expect(lastNameValid.getText()).toContain('true');
  expect(formValid.getText()).toContain('true');});

it('should be invalid if less than required min length', function() {
  userLastInput.clear();
  userLastInput.sendKeys('xx');

  expect(user.getText()).toContain('{"name":"guest"}');
  expect(lastNameValid.getText()).toContain('false');
  expect(lastNameError.getText()).toContain('minlength');
  expect(formValid.getText()).toContain('false');});

it('should be invalid if longer than max length', function() {
  userLastInput.clear();
  userLastInput.sendKeys('some ridiculously long name');

  expect(user.getText()).toContain('{"name":"guest"}');
  expect(lastNameValid.getText()).toContain('false');
  expect(lastNameError.getText()).toContain('maxlength');
  expect(formValid.getText()).toContain('false');});