Angular 的表单属性 $valid, $invalid, $pristine, $dirty
Angular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息,并且应用到了表单和输入.
属性类 | 描述 | |
$valid | ng-valid | Boolean 告诉我们这一项当前基于你设定的规则是否验证通过 |
$invalid | ng-invalid | Boolean 告诉我们这一项当前基于你设定的规则是否验证未通过 |
$pristine | ng-pristine | Boolean 如果表单或者输入框没有使用则为True |
$dirty | ng-dirty | Boolean 如果表单或者输入框有使用到则为True |
Angular 也提供了有关表单及其输入框的类,以便你能够依据每一个状态设置其样式.
1.确保form上标签有一个name属性,像下面的例子一样。最好再加一个novalidate=”novalidate”
2.form中不能有action属性。提交交由ng-submit处理
3.每个input一定要有ng-model,最好有一个name方便引用。然后用require或者ng-minlength之类才起作用
<form name="form" novalidate="novalidate">
<label name="email">Your email</label>
<input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>
ng默认提供了验证
验证是否已输入文字,只需在标签上加上required:
<input type="text" ng-model="user.name" required />
验证至少输入{number}个字符,使用指令ng-minlength=“{number}”:
<input type="text" ng-model="user.name" ng-minlength="5" />
验证至多输入{number}个字符,使用指令ng-maxlength=“{number}”:
<input type="text" ng-model="user.name" ng-maxlength="20" />
确保输入匹配一个正则表达式,使用指令ng-pattern="/PATTERN/":
<input type="text" ng-model="user.name" ng-pattern="/a-zA-Z/" />
验证输入是一个Email,设置input的type属性为email:
<input type="email" name="email" ng-model="user.email" />
验证输入是一个数字,设置input的type属性为number:
<input type="number" name="number" ng-model="user.age" />
验证输入是一个URL,设置input的type属性为url
<input type="url" name="homepage" ng-model="user.weburl" />
验证规则
Angular 有很多验证规则,像是 tong-min leng than dng-max length.
Angular还可以自己配置规则. Angular输入指引上有说明 .
<input
ng-model="{ string }"
name="{ string }"
required
ng-required="{ boolean }"
ng-minlength="{ number }"
ng-maxlength="{ number }"
ng-pattern="{ string }"
ng-change="{ string }">
</input>
禁用提交按钮 ng-disabled现在真正的好戏上演了。我们开始使用Angular的属性 。首先让我们禁用我们的提交按钮。如果我们的表单是$invalid的,我们只想禁用它。
只使用一点代码(ng-disabled),如果我们的表单是$invalid的,表单按钮将被禁用。
|