Form表单

Form表单

一般来讲表单可能遇到的问题

1. 如何数据绑定

2. 验证表单

3. 显示出错信息

4. 整个Form的验证

5. 避免提交没有验证通过的表单

6. 防止多次提交

input type 扩展

• number

• url

• password

• email

• reset

input 属性

• name 名字

• ng-model 绑定的数据

• ng-required 是否必填

• ng-minlength 最小长度

• ng-maxlength 最大长度

• ng-pattern 匹配模式

• ng-change 值变化时的回调

CSS样式

• ng-valid 当表单验证通过时的设置

• ng-invalid 表单验证失败时的设置

• ng-pristine 表单的未被动之前拥有

• ng-dirty 表单被动过之后拥有

Form控制变量

• 字段是否未更改

  formName.inputFieldName.$pristine

• 字段是否更改

  formName.inputFieldName.$dirty

• 字段有效

  formName.inputFieldName.$valid

• 字段无效

  formName.inputFieldName.$invalid

• 字段错误信息

  formName.inputfieldName.$error

事件

AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。以下是AngularJS支持的事件。

• ng-click

• ng-dbl-click

• ng-mousedown

• ng-mouseup

• ng-mouseenter

• ng-mouseleave

• ng-mousemove

• ng-mouseover

• ng-keydown

• ng-keyup

• ng-keypress

• ng-change

From 方法

• $setPristine 将表单复位原始状态，class,$dirty,$pristine

ng-model

• ng-model是angular原生的directive

• 可以通过require ngModel 可以更深入的去处理数据的双向绑定

ngModel里的属性

• $parsers属性 保存了从viewValue向modelValue绑定过程中的处理函数，它们将来会依次执行

• $formatters 它保存的是从modelValue向viewValue绑定过程中的处理函数

• $setViewValue 当view发生了某件事情时，从view向model绑定调用

  $setViewValue 把viewValue保存下来

• $render 当模型发生变化时，应该怎么去更新视图，从model向view绑定，调用ctrl.$render⽅方法，将viewValue渲染到页面上

• $setValidity 设置验证结果

• $viewValue 视图的值

• $modelValue 模型⾥里的值