名稱為"ngMessages"的module，通過npm install angular-messages進行安裝。在沒有使用ngMessages之前，我們可能這樣寫驗證：
<form name="userForm"> <input type="text" name="username" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required> <p ng-show="userForm.username.$error.minlength">Username is too short.</p> <p ng-show="userForm.username.$error.maxlength">Username is too long.</p> <p ng-show="userForm.username.$error.required">Your username is required.</p> </form>
以上，列舉了每種可能的驗證失敗，並且手工編寫是否顯示錯誤提示信息。
有了"ngMessages"這個module,大致這么寫：
<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched"> <p ng-message="minlength">用戶名最小長度5</p> <p ng-message="maxlength">用戶名最大長度10</p> <p ng-message="required">用戶名必填</p> </div>
ngMessages為我們自動判斷顯示哪種錯誤。
使用ngMessages的幾個關鍵點：
● npm install angular-messages
● 引用：angular-messages.js
● 依賴：angular.module('app',['ngMessages'])
這里有一個簡單的Demo,文件結構：
node_modules/
app.js
emailmessages.html
index.html
安裝如下：
npm install bootstrap
npm install angular
npm install angular-messages
==index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/> <style> body{ padding-top: 50px; } </style> </head> <body class="container" ng-app="app" ng-controller="MainCtrl as main"> <form name="userForm" novalidate> <div class="form-group" ng-class="{'has-error':userForm.name.$touched && userForm.name.$invalid}"> <label>用戶名</label> <input type="text" name="name" class="form-control" ng-model="main.name" ng-minlength="5" ng-maxlength="10" required/> <div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched"> <p ng-message="minlength">用戶名最小長度5</p> <p ng-message="maxlength">用戶名最大長度10</p> <p ng-message="required">用戶名必填</p> </div> </div> <div class="form-group" ng-class="{'has-error':userForm.email.$touched && userForm.email.$invalid}"> <label>郵箱</label> <input type="email" name="email" class="form-control" ng-model="main.email" ng-minlength="5" ng-maxlength="20" required/> <div class="help-block" ng-messages="userForm.email.$error" ng-if="userForm.email.$touched"> <div ng-messages-include="emailmessages.html"></div> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-danger">提交</button> </div> <pre>{{userForm.name.$error}}</pre> <pre>{{userForm.email.$error}}</pre> </form> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/angular-messages/angular-messages.js"></script> <script src="app.js"></script> </body> </html>
app.js
angular.module('app',['ngMessages'])
.controller('MainCtrl', MainCtrl);
function MainCtrl(){
}
emailmessages.html
把有關email的表單驗證放在這里，通過<div ng-messages-include="emailmessages.html"></div>顯示到頁面某個位置上。
<p ng-message="required">郵箱必填</p> <p ng-message="minlength">郵箱長度太短</p> <p ng-message="maxlength">郵箱長度太長</p> <p ng-message="email">郵箱無效</p>