Page 54 - AngularJS权威教程

34 第 7 章 过滤器

<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>
</div>

后面的章节会讨论样式方面的内容，现在我们只会简单地把样式引入进来。本章使用
①
Foundation 作为CSS布局的框架。
我们添加了一个表单，这个表单有一个名为name的输入字段，并且这个输入字段被ng-model
指令绑定到了$scope对象的signup.name上。

不要忘记给输入字段添加name属性。给输入字段添加name属性非常重要：这决
定了我们将验证信息展示给用户时如何引用表单输入字段。

同时，我们也设置了一些验证。验证要求name字段的最小长度是3个字符，最大长度是20个
字符（当长度大于等于21时输入会变为不合法）。最后，我们要求name字段是必填项。

通过使用这些属性，可以在表单未通过验证时控制展示或隐藏错误列表。用$dirty属性来确
保用户未对输入内容进行修改时错误内容不会显示出来：

<divclass="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">
<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>

——————————
① http://foundation.zurb.com/