Angular提供了一套很是强大的表单验证库(vue和react都须要第三方库的支持),能够很是方便简单实现web应用程序中的表单验证功能。可是如何让咱们自定义的组件也支持验证呢?vue
我遇到一个需求是封装WangEditor这个富文本编辑器放到表单中。react
这种需求是很是常见的,Angular给咱们提供了ControlValueAccessor接口,咱们能够很方便的实现自定义验证功能web
用官方的话来讲,ControlValueAccessor是充当 Angular 表单 API 和 DOM 中的原生元素之间的桥梁typescript
这个接口提供了四个方法编辑器
interface ControlValueAccessor { writeValue(obj: any): void registerOnChange(fn: any): void registerOnTouched(fn: any): void setDisabledState(isDisabled: boolean)?: void }
通常状况下,只须要处理writeValue
和registerOnChange
两个方法ide
writeValue是formGroup把值传递给自定义组件,自定义组件须要根据这个值处理对应的显示状态。双向绑定
registerOnChange的参数是一个Function,须要在组件状态修改的时候,调用这个Function来把组件的值传递给formGroupcode
若是是单纯的实现了这个接口,是没法生效的。须要在模块注册或者组件上的Attribute中去注册NG_VALUE_ACCESSOR
值为当前组件。orm
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: QWangEditorComponent, multi: true }]
作完这一步后,这个组件就支持了Angular的表单验证功能了。接口
在表单中,加上formControlName
属性,自定义组件的功能就能够和formGroup
中的对应属性实现双向绑定了,并支持表单验证了。
欢迎关注个人公众号【青城同窗】,不定时和你分享我各类技术和非技术的东西