ngMessages(1.3+)

眾所周知，表單和驗證是Angular中復雜的組件之一。上面的例子不是特別好，不簡潔。在
Angular 1.3發布前，表單驗證必須以這種方式編寫。
然而在發布的Angular 1.3中，Angular核心做了一個升級。它不再需要基於一個詳細的表達式
狀態創建元素顯示或隱藏（正如我們在本章所做的那樣）。

<form name="signup_form" novalidate ng-submit="signupForm()"
ng-controller="signupController">
<fieldset>
<legend>Signup</legend>
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name"
ng
 
-minlength=3 ng-maxlength=20 required />
<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.
$invalid && signup_form.submitted">
<small class="error" ng-show="signup_form.name.$error.required">
Your name is required.</small>
<small class="error" ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 
 
3 characters</small>
<small class="error" ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters </small>
</div>
</div>
</div>
<button type="submit">Submit</button>
</fieldset>
</form>

本質上這一功能會檢查錯誤對象的狀態發生了變化。此外，我們還得到了站點中每個表單需

<form name="signup_form" novalidate ng-submit="signupForm()"
ng-controller="signupController">

<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=
3 ng-maxlength=20 required />
<div class="error" ng-messages="signup_form.name.$error">
<div ng-message="required">Make sure you enter your name</div>
<div ng-message="minlength">Your name must be at least 3 characters</div>
<div ng-message="maxlength">Your name cannot be longer than 20 characters</div>
</div>
<button type="submit">Submit</button>
</form>

借助ngMessages，表本身比前面的實現更清潔，並且更好理解。
然而對於這個實現，一次只會顯示一個錯誤消息。如果我們想要更新這個實現同時顯示所有
的錯誤將會怎樣？很容易。只需在ng-message指令旁邊使用ng-messages-multiple屬性即可。

<div class="error" ng-messages="signup_form.name.$error" ng-messages-multiple>
<div ng-message="required"> sure you enter your name</div>
<div ng-message="minlength">Your name must be at least 3 characters</div>
<div ng-message="maxlength">Your name cannot be longer than 20 characters</div>
</div>

很多時候這些信息相互之間非常相似。我們可以將它們保存到模板中從而減少麻煩，而不是
重新輸入每個字段的錯誤信息。

<!-- In templates/errors.html -->
<div ng-message="required">This field is required</div>
<div ng-message="minlength">The field must be at least 3 characters</div>
<div ng-message="maxlength">The field cannot be longer than 20 characters</div>

然後我們可以通過在視圖中使用ng-messages-include屬性引入這個模板來改進這個表單：

<div class+‘error‘ ng-messages="signup_form.name.$error"
ng-messages-include="templates/errors.html">
</div>

有時，你可能希望為不同的字段自定義錯誤信息。沒問題，你可以在這個指令內簡單地插入
一個自定義錯誤信息。由於ngMessages涉及ngMessages容器中錯誤列表的順序，我們可以通過
在這個指令中列出自定義錯誤信息的方式覆蓋它們。

<div class="error" ng-messages="signup_form.name.$error"
ng-messages-include="templates/errors.html">
<!--除了minlength會被覆蓋之外，其他每個信息都會保持不變-->
</div>

此外，甚至還可以為自定義驗證創建自定義消息。可以通過修改模型的$ parsers鏈做到這
一點。
例如，比方說我們想要創建一個自定義驗證器驗證用戶名在一個註冊表單中是否有效：

app.directive(‘ensureUnipue‘, function($http) {
return {
require: ‘ngModel‘,
link: function(scope, ele, attrs, ctrl) {
ctrl.$parsers.push(function(val) {

// 在這裏添加驗證
});
}
}
});

對於ngModel，你可以添加可以使用ngMessage指令顯示/隱藏的自定義信息。還可以添加可
以使用ngMessage指令檢查的帶有自定義的消息的指令。例如，改變前面使用ngMessages的例子。

<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController"
ensure-unique="/api/checkUsername.json">
<label>
Your name
</label>
<input type="text" placeholder="Username" name="username" ng-model="signup.username"
ng-minlength=3 ng-maxlength=20 required />
<div class="error" ng-messages="signup_form.username.$error">
<div ng-message="required">
Make sure you enter your username
</div>
<div ng-message="checkingAvailability">
Checking...
</div>
<div ng-message="usernameAvailablity">
The username has already been taken. Please choose another
</div>
</div>
<button type="submit">
Submit
</button>
</form>

在這中用法中，我們檢查了錯誤信息的自定義屬性。為了添加自定義錯誤消息，我們將會把
它們應用到自定義ensureUnique指令的ngModel中。

app.directive(‘ensureUnique‘, function($http) {
return {
require: ‘ngModel‘,
link: function(scope, ele, attrs, ctrl) {
var url = attrs.ensureUnique;
ctrl.$parsers.push(function(val) {
if (!val || val.length === 0) {
return;
}
ngModel.$setValidity(‘checkingAvailability‘, true);
ngModel.$setValidity(‘usernameAvailablity‘, false);
$http({
method: ‘GET‘,
url: url,
params: {
username: val
}
}).success(function() {
ngModel
.$setValidity(‘checkingAvailability‘, false);
ngModel
.$setValidity(‘usernameAvailablity‘, true);

})[‘catch‘](function() {
ngModel
.$setValidity(‘checkingAvailability‘, false);
ngModel
.$setValidity(‘usernameAvailablity‘, false);
});
return val;
})
}
}
});

angular-messages.js信息驗證的使用