?
Ce document utilise Manuel du site Web PHP chinois Libérer
Angular數(shù)據(jù)綁定HTML輸入元素控制。輸入控制跟隨HTML5的輸入類型,并為舊的瀏覽器模擬(polyfills)HTML5驗(yàn)證行為。
<input
ng-model=""
[name=""]
[required=""]
[ng-required=""]
[ng-minlength=""]
[ng-maxlength=""]
[ng-pattern=""]
[ng-change=""]>
...
</input>
參數(shù) | 類型 | 詳述 |
---|---|---|
ngModel | string | 聲明用于數(shù)據(jù)綁定的Angular表達(dá)式。 |
name (可選)
|
string | 發(fā)布到表單下的控件的屬性名稱。 |
required
(可選)
|
string | 如果未輸入值就設(shè)置 |
ngRequired
(可選)
|
boolean | 如果值為true則置為 |
ngMinlength
(可選)
|
number | 如果值短于minlength則設(shè)置 |
ngMaxlength
(可選)
|
number | 如果值長(zhǎng)于maxlength則設(shè)置 |
ngPattern
(可選)
|
string | 如果值不匹配正則表達(dá)式則設(shè)置 |
ngChange
(可選)
|
string | Angular表達(dá)式,當(dāng)輸入元素通過用戶交互方式發(fā)生輸入變化時(shí)會(huì)執(zhí)行這個(gè)表達(dá)式。 |
<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');});