Page 59 - AngularJS权威教程

7.2 表单验证 39

ngMessages(1.3+) 1

众所周知，表单和验证是Angular中复杂的组件之一。上面的例子不是特别好，不简洁。在
Angular 1.3发布前，表单验证必须以这种方式编写。 2
然而在发布的Angular 1.3中，Angular核心做了一个升级。它不再需要基于一个详细的表达式
状态创建元素显示或隐藏（正如我们在本章所做的那样）。 3

<form name="signup_form" novalidate ng-submit="signupForm()"
ng-controller="signupController"> 4
<fieldset>
<legend>Signup</legend>
<div class="row">
<div class="large-12 columns"> 5
<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name"
ng-minlength=3 ng-maxlength=20 required /> 6
<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> 7
<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"> 8
Your name cannot be longer than 20 characters </small>
</div>
</div> 9
</div>
<button type="submit">Submit</button>
</fieldset>
</form> 10
本质上这一功能会检查错误对象的状态发生了变化。此外，我们还得到了站点中每个表单需
要的很多额外的和重复的标记。这显然不是一个理想的解决方案。 11

从1.3开始，Angular中新增了一个ngMessages指令。
12
安装
安装ngMessages很简单，因为它被打包成了一个Angular模块。首先下载这个模块：
13
$ bower install --save angular-messages
或者，也可以从angular.org下载该文件并将它保存到项目中。还需要将angular-messages.js这 14
个JavaScript引入我们的主HTML中：

<script type="text/javascript" src="bower_components/angular-messages/angular-messages.js"> 15
</script>
最后，我们还要告诉Angular将ngMessages作为应用程序的依赖模块引入，就像这样：
16
angular.module('myApp', ['ngMessages']);
现在，我们已经安装了ngMessages，然后可以马上开始使用它了。使用前面的例子作为基 17
础，你可以移除ng-show指令，然后使用ngMessages的一个更简洁的实现替换它。

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