（九）2表单验证

（一）响应式表单校验
最简单的控制器校验器语法。
只能返回对象或null（null代表验证通过），返回值的key只能是字符串

image.png

angular内置的校验器

image.png

通过formModel.get(''name'').valid来查看校验是否通过

image.png

通过formModel.get(''name'').errors来获取获取错误信息

image.png

人工定义校验器

image.png

在表单对象上面的语法，

image.png

formGroup校验器写法

image.png

表单对象的写法

image.png

（二）将校验器分离出去，做到公用校验器可重用

1.新建typeScipt文件，将class的校验器属性，更改为function，通过export暴露出去，表单对象的写法不变，只需引入即可。

image.png

当所有的校验器都加上去之后，可以通过this.formModel.valid来校验表单是否通过校验，

image.png

2.0错误信息的提示

在HTML上添加用户名的校验错误信息

image.png

使用hasError方法，他的两个参数分别为你的校验器返回对象的key值，你要校验的对象。
再比如在用户名上添加另一个最小长度的错误信息的提示

image.png

表单组的校验错误信息的语法（注意嵌套关系）

image.png

在校验器上添加错误信息

image.png

HTML上的语法

image.png

（三）异步校验器
在校验器上面的写法，区别是这种校验器，返回的是一个可观测的数据流

image.png

控制器上表单对象的语法，

image.png

作为第三个参数传入
HTML上的语法

image.png