让Angular自定义组件支持form表单验证

让Angular自定义组件支持form表单验证

Angular提供了一套非常强大的表单验证库（vue和react都需要第三方库的支持），可以非常方便简单实现web应用程序中的表单验证功能。但是如何让我们自定义的组件也支持验证呢？

我遇到一个需求是封装WangEditor这个富文本编辑器放到表单中。

这种需求是非常常见的，Angular给我们提供了ControlValueAccessor接口，我们可以很方便的实现自定义验证功能

理解ControlValueAccessor

用官方的话来说，ControlValueAccessor是充当 Angular 表单 API 和 DOM 中的原生元素之间的桥梁

这个接口提供了四个方法

interface ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

一般情况下，只需要处理writeValue和registerOnChange两个方法

writeValue是formGroup把值传递给自定义组件，自定义组件需要根据这个值处理对应的显示状态。

registerOnChange的参数是一个Function，需要在组件状态修改的时候，