Angular 4笔记——表单

表单，以下几个指令

第一 对象绑定 即通过 #xxx="ngForm" 获得form的引用 通过value属性获取表单内容对象，valid属性获取是否有效，每一个input也可以通过#xxx="ngModel" 获得对应input的引用 同样valid获取是否验证成功

表单验证

表单验证常用了require minlength maxlength之类的百度一下就好 放在input上

form事件绑定

(ngSubmit)事件 一般ide不会提示，但是写出来后就会看到 是正确的

对应的每一个input上都可以通过[(ngModel)]="xxx"指定属性绑定到内部的某个属性

需要注意的是一般 ngModel 可以直接放到标签里，而不绑定某个属性，这样就直接同步到Form的value对象里以name为键

总的来说这几个指令

ngModel表示生效 [(ngModel)]="xxx" 表示绑定到属性（双向)

ngSubmit为提交事件

#xxx="ngForm"表示对Form的引用 #xxx="ngModel"表示对一个input的引用

ngModelGroup表示子节点为一个“组”,可以用任何有子节点的标签上，一般和fieldset配合使用，语义化

表单状态

表单控件有状态 比如是否验证成功，不同状态会附加不同的class到标签上，这样就可以通过自定义相应类的样式进行自定义反应

最常用的是 ng-valid 和ng-invalid表示验证成功和未成功

一般来说，需要注意下面几种状态:

valid - 表单控件有效

invalid - 表单控件无效

pristine - 表单控件值未改变

dirty - 表单控件值已改变

touched - 表单控件已被访问过

untouched - 表单控件未被访问过

 需要注意 touch 表示访问“过”，就是点了一下后又点了别的地方