（九）2表单验证
2017-07-20 本文已影响0人
马丁路德东
（一）响应式表单校验
最简单的控制器校验器语法。
只能返回对象或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
