angular-messages.js資訊驗證的使用

標籤：添加   json   隱藏   check   min   false   核心   model   項目   

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>

 

本質上這一功能會檢查錯誤對象的狀態發生了變化。此外，我們還得到了網站中每個表單需
要的很多額外的和重複的標記。這顯然不是一個理想的解決方案。
從1.3開始，Angular中新增了一個ngMessages指令。
安裝
安裝ngMessages很簡單，因為它被打包成了一個Angular模組。首先下載這個模組：
$ bower install --save angular-messages
或者，也可以從angular.org下載該檔案並將它儲存到項目中。還需要將angular-messages.js這
個JavaScript引入我們的主HTML中：
<script type="text/javascript" src="bower_components/angular-messages/angular-messages.js">
</script>
最後，我們還要告訴Angular將ngMessages作為應用程式的相依模組引入，就像這樣：
angular.module(‘myApp‘, [‘ngMessages‘]);
現在，我們已經安裝了ngMessages，然後可以馬上開始使用它了。使用前面的例子作為基
礎，你可以移除ng-show指令，然後使用ngMessages的一個更簡潔的實現替換它。

<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資訊驗證的使用