什么是ControlValueAccessor
根据官方文档,ControlValueAccessor是一个接口,这个接口相当于Angular forms API和DOM 元素之间的桥梁。
为什么要用ControlValueAccessor
关于FormControl,Angular 官方文档将它描述为追踪单个表单控件值和有效性的实体对象。不管使用模板驱动还是响应式表单(译者注:即模型驱动),FormControl 都总会被创建。如果使用响应式表单,需要显式创建 FormControl 对象,并使用 formControl 或 formControlName 指令来绑定原生控件;如果使用模板驱动方法,FormControl 对象会被 NgModel 指令隐式创建。
在angular中使用自定义表单控件,可能该控件输入入口并不是标准的input等输入框,angular内置的一些响应或者模板驱动表单api便无法使用。通过实现ControlValueAccessor 接口并将组件注册为 NG_VALUE_ACCESSOR,从而转变成 ControlValueAccessor 类型的对象,可以将表单API应用于这些非标准表单控件上。
接口API
interface ControlValueAccessor {
writeValue(obj: any): void
registerOnChange(fn: any): void
registerOnTouched(fn: any): void
setDisabledState(isDisabled: boolean)?: void
}
这个接口定义的两个重要方法——writeValue 和 registerOnChange
formControl 指令使用 writeValue 方法设置原生表单控件的值;使用 registerOnChange 方法来注册由每次原生表单控件值更新时触发的回调函数,需要把更新的值传给这个回调函数,这样对应的 Angular 表单控件值也会更新
writeValue()
将model中的值写入view中
writeValue(obj: any): void
registerOnChange()
当UI组件中的值变化时,调用回调函数,将view中的值更新至model中
registerOnChange(fn: any): void