Page 61 - AngularJS权威教程

7.2 表单验证 41

// 在这里添加验证 1
});
}
}
}); 2
对于ngModel，你可以添加可以使用ngMessage指令显示/隐藏的自定义信息。还可以添加可
以使用ngMessage指令检查的带有自定义的消息的指令。例如，改变前面使用ngMessages的例子。 3

<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController"
ensure-unique="/api/checkUsername.json"> 4
<label>
Your name
</label>
<input type="text" placeholder="Username" name="username" ng-model="signup.username" 5
ng-minlength=3 ng-maxlength=20 required />
<div class="error" ng-messages="signup_form.username.$error">
<div ng-message="required"> 6
Make sure you enter your username
</div>
<div ng-message="checkingAvailability">
Checking... 7
</div>
<div ng-message="usernameAvailablity">
The username has already been taken. Please choose another 8
</div>
</div>
<button type="submit">
Submit 9
</button>
</form>
10
在这中用法中，我们检查了错误信息的自定义属性。为了添加自定义错误消息，我们将会把
它们应用到自定义ensureUnique指令的ngModel中。
11
app.directive('ensureUnique', function($http) {
return {
require: 'ngModel', 12
link: function(scope, ele, attrs, ctrl) {
var url = attrs.ensureUnique;

ctrl.$parsers.push(function(val) { 13
if (!val || val.length === 0) {
return;
} 14

ngModel.$setValidity('checkingAvailability', true);
ngModel.$setValidity('usernameAvailablity', false);
15
$http({
method: 'GET',
url: url, 16
params: {
username: val
}
}).success(function() { 17
ngModel
.$setValidity('checkingAvailability', false);
ngModel 18
.$setValidity('usernameAvailablity', true);