Angular内置接口之ControlValueAccessor

580 阅读1分钟

什么是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