(一)响应式表单校验
最简单的控制器校验器语法。
只能返回对象或null(null代表验证通过),返回值的key只能是字符串
angular内置的校验器
通过formModel.get(''name'').valid来查看校验是否通过
通过formModel.get(''name'').errors来获取获取错误信息
人工定义校验器
在表单对象上面的语法,
formGroup校验器写法
表单对象的写法
(二)将校验器分离出去,做到公用校验器可重用
1.新建typeScipt文件,将class的校验器属性,更改为function,通过export暴露出去,表单对象的写法不变,只需引入即可。
当所有的校验器都加上去之后,可以通过this.formModel.valid来校验表单是否通过校验,
2.0错误信息的提示
在HTML上添加用户名的校验错误信息
使用hasError方法,他的两个参数分别为你的校验器返回对象的key值,你要校验的对象。
再比如在用户名上添加另一个最小长度的错误信息的提示
表单组的校验错误信息的语法(注意嵌套关系)
在校验器上添加错误信息
HTML上的语法
(三)异步校验器
在校验器上面的写法,区别是这种校验器,返回的是一个可观测的数据流
控制器上表单对象的语法,
作为第三个参数传入
HTML上的语法