AngularJS: API: ng/directive/input

input

- directive in module ng

Angular数据绑定HTML输入元素控制。输入控制跟随HTML5的输入类型，并为旧的浏览器模拟(polyfills)HTML5验证行为。

指令信息

这个指令执行优先级为0.

用法

作为元素使用:

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

参数

参数	类型	详述
ngModel	string	声明用于数据绑定的Angular表达式。
name (可选)	string	发布到表单下的控件的属性名称。
required (可选)	string	如果未输入值就设置 `required` 验证错误键。
ngRequired (可选)	boolean	如果值为true则置为 `required` 属性
ngMinlength (可选)	number	如果值短于minlength则设置 `minlength` 验证错误键。
ngMaxlength (可选)	number	如果值长于maxlength则设置 `maxlength` 验证错误键。
ngPattern (可选)	string	如果值不匹配正则表达式则设置 `pattern` 验证错误键。值可以是 `/regexp/` 形式的内嵌正则表达式，或者是用 `regexp` 定义在scope中的表达式。
ngChange (可选)	string	Angular表达式，当输入元素通过用户交互方式发生输入变化时会执行这个表达式。

示例

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');});

Vorheriger Artikel： Nächster Artikel：