Page 57 - AngularJS权威教程

7.2 表单验证 37

 在提交后显示验证信息 1
当用户试图提交表单时，你可以在作用域中捕获到一个submitted值，然后对表单内容进行
验证并显示错误信息。 2

例如，修改一下前面的例子，只在用户提交表单时才显示错误信息。在ng-show指令中加入
对表单是否进行了提交的检查（后面会实现这个功能）： 3
<form name="signup_form"
novalidate
ng-submit="signupForm()" 4
ng-controller="signupController">
<fieldset>
<legend>Signup</legend> 5
<div class="row">
<div class="large-12 columns">
<label>Your name</label> 6
<input type="text"
placeholder="Name"
name="name"
ng-model="signup.name" 7
ng-minlength="3"
ng-maxlength="20" required />
<div class="error" 8
ng-show="signup_form.name.$dirty && signup_form.name.$invalid &&
signup_form.submitted">
<small class="error"
ng-show="signup_form.name.$error.required"> 9
Your name is required.
</small>
<small class="error" 10
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error" 11
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small> 12
</div>
</div>
</div>
<button type="submit" >Submit</button> 13
</fieldset>
</form>
14
现在，仅当signup_form.submitted设置为true时，容纳错误信息的div才会展示出来。在
signupForm操作中实现这个行为，如下所示：
15
app.controller('signupController', function($scope) {
$scope.submitted = false;
$scope.signupForm = function() { 16
if ($scope.signup_form.$valid) {
// 正常提交
} else {
$scope.signup_form.submitted = true; 17
}
}
});
18