Angular的表单验证与ng-model

构建一个ng表单

1. 确保form和input标签有name属性，form最好再加novalidate属性
2. form中不能有action属性。提交交由ng-submit处理
3. 每个input一定要有ng-model，然后用required或者ng-minlength之类才起作用

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访问对应状态值:

Email:

    
请输入内容
    
请输入正确的邮箱
    
请输入正确的长度
编辑邮箱地址，查看状态的改变。
状态

  警告警告

Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。
Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。
Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。

• 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//表单内容无填写记录

    输入你的名字: