表单,以下几个指令
第一 对象绑定 即通过 #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 表示访问“过”,就是点了一下后又点了别的地方