构建一个ng表单
- 确保form和input标签有name属性，form最好再加novalidate属性
- form中不能有action属性。提交交由ng-submit处理
- 每个input一定要有ng-model，然后用required或者ng-minlength之类才起作用
<input type="email" ng-model="user.name" ng-minlength="5" ng-maxlength="20" ng-pattern="/a-zA-Z/">
ng-model的作用:
- 数据双向绑定
- 对于checkbox框,ng-model值为true/false,可以通过设置 ng-ture-value='true的值' 和 ng-false-value='false的值' 改变本为true和false的返回值
- 对于radio和select,都是选中者的value
- 验证输入
- ng-model 指令为应用数据提供了以下状态值:
$touched 通过触屏点击
$error 非法详情
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
angular中可以直接通过formname.inputname.property或者formname.property访问对应状态值:
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'" novalidate>
Email:
<input type="email" name="myAddress" ng-model="myText" ng-minlength="5" required>
<div ng-show='myForm.myAddress.$error.required'>请输入内容</div>
<div ng-show='myForm.myAddress.$error.email'>请输入正确的邮箱</div>
<div ng-show='myForm.myAddress.$error.minlength'>请输入正确的长度</div>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<div style="color:red" ng-show="myForm.myAddress.$dirty && myForm.myAddress.$invalid">
警告警告
</div>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p><p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
</form>
- ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid //输入合法(即无$error,包括required,email等都通过)
- ng-invalid
- ng-dirty //表单内容有填写记录
- ng-pending
- ng-pristine//表单内容无填写记录
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
