AngularJS: API: ng/directive/input

input

- directive in module ng

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

指令信息

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

用法

作为元素使用:

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

参数

参数	类型	详述
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

ng-controller="ExampleController">name="myForm">User name:Type="text"name="userName"ng-model="user.name"required>class="error"ng-show="myForm.userName.$error.required">Required!
Last name:Type="text"name="lastName"ng-model="user.last"ng-minlength="3"ng-maxlength="10">class="error"ng-show="myForm.lastName.$error.minlength">Too short!class="error"ng-show="myForm.lastName.$error.maxlength">Too long!
user = {{user}}
myForm.userName.$valid = {{myForm.userName.$valid}}
myForm.userName.$error = {{myForm.userName.$error}}
myForm.lastName.$valid = {{myForm.lastName.$valid}}
myForm.lastName.$error = {{myForm.lastName.$error}}
myForm.$valid = {{myForm.$valid}}
myForm.$error.required = {{!!myForm.$error.required}}
myForm.$error.minlength = {{!!myForm.$error.minlength}}
myForm.$error.maxlength = {{!!myForm.$error.maxlength}}

protractor.js

varuser=element(by.binding('{{user}}'));varuserNameValid=element(by.binding('myForm.userName.$valid'));varlastNameValid=element(by.binding('myForm.lastName.$valid'));varlastNameError=element(by.binding('myForm.lastName.$error'));varformValid=element(by.binding('myForm.$valid'));varuserNameInput=element(by.model('user.name'));varuserLastInput=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');});

前の記事：次の記事：