Angular中的自定义表单控件ControlValueAccessor

这个是个较为简单的理解

ControlValueAccessor acts as a bridge between the Angular forms API and a native element in the DOM.

作用：

把 form 模型中值映射到视图中
当视图发生变化时，通知 form directives 或 form controls

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

writeValue(obj: any)：该方法用于将模型中的新值写入视图或 DOM 属性中，即model->view
registerOnChange(fn: any)：设置当控件接收到 change 事件后，调用的函数，可以用来通知外部，组件已经发生变化，即view->model
registerOnTouched(fn: any)：设置当控件接收到 touched 事件后，调用的函数
setDisabledState?(isDisabled: boolean)：当控件状态变成 DISABLED 或从 DISABLED 状态变化成 ENABLE 状态时，会调用该函数。该函数会根据参数值，启用或禁用指定的 DOM 元素。

任何一个组件或指令都可以通过实现 ControlValueAccessor 接口并注册为 NG_VALUE_ACCESSOR，从而转变成 ControlValueAccessor 类型的对象

registerOnChange 方法来注册由每次原生表单控件值更新时触发的回调函数

Example:

子组件

@Component({
    selector: 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls: ['./demo.component.css'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: DemoComponent,
            multi: true
        },
        DemoService
    ]
})

export class DemoComponent implements ControlValueAccessor, OnInit {
    private _result: { [index: string]: [] } = {};
    private _labelHandler: (val: any) => void;
  
  	constructor(
        private service: DemoService,
    ) { }
  
  	aTestFunc(){
      this._labelHandler("123123")
    }
  	
  	writeValue(value: string) {
        if (value) {
            // todo 在这里对父组件传进来的ngmodel值做处理
        }
    }
    registerOnChange(fn: any) {
      	//每次控件view层的值发生改变，都要调用该方法通知外部
        this._labelHandler = fn;
    }
    registerOnTouched(fn: any) {}
}

父组件

1 2	// html <app-demo [(ngModel)]="demo" ></app-demo>

// component.ts

ngOnInit() {
  // 给demo一个值双向绑定
}