实现可重复使用的材料自动完成组件

Question

我需要在应用程序中多次使用物料自动完成组件。 基本实现在这里：

<mat-form-field class="example-full-width">
    <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" formControlName="state">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

我想创建一个封装了自动完成功能的可重用组件，以便像这样使用它：

<my-state-autocomplete></my-state-autocomplete>

我的问题是：如何实现ControlValueAccessor以类似形式使用它：

<form [formGroup]="form">
    <my-state-autocomplete formControlName="state1"></my-state-autocomplete>
    <my-state-autocomplete formControlName="state2"></my-state-autocomplete>
    <my-state-autocomplete formControlName="state3"></my-state-autocomplete>
</form>

非常感谢