Angular material Datepicker抛出多个自定义值访问器，与具有未指定名称属性的表单控件匹配

import { Directive, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

@Directive({
  selector: '[appCustomValueAccessor]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomValueAccessorDirective),
      multi: true
    }
  ]
})
export class CustomValueAccessorDirective implements ControlValueAccessor {
  private onChange: any;
  private onTouched: any;
  private value: any;

  writeValue(value: any): void {
    this.value = value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setValue(newValue: any): void {
    this.value = newValue;
    this.onChange(newValue);
    this.onTouched();
  }
}

<mat-form-field>
  <input matInput [matDatepicker]="myDatepicker" appCustomValueAccessor>
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker></mat-datepicker>
</mat-form-field>