如何为位于表单组内的表单控制器添加角度材料自动完成功能？

Question

我有一个表格组。在此表单组中，有一些表单控制器。我想为表单组内的表单控制器添加自动完成功能。我已经尝试了一些不同的方法，这些方法已在堆栈溢出中发布。但是这些都不适合我。我的表单组如下所示。

options = [{'name': 'xxx'}, {'name':'yyy'}, ...]

DocumentForm = new FormGroup({
    FacilityName: new FormControl(''),
    Type: new FormControl(''),
    Payer: new FormControl(''),
    FirstName: new FormControl(''),
});

我需要为 FacilityName 表单控制器添加自动填充字段。 为此，我已经完成了以下操作

this.filterdFacOption = this.DocumentForm.get('FacilityName').pipe(
      startWith(''),
      map(val => this.filteringVal(val))
    )

过滤功能如下

private filteringVal(val: any): any[] {
    console.log(val)
    const filterdVal = val

    return this.options.filter(opt => opt.name.toLowerCase().includes(filterdVal))
  }

HTML如下所示，

<mat-form-field class="example-full-width">
<input type="text" placeholder="Facility Name" aria-label="123" matInput [formControl]="FacilityName"
  [matAutocomplete]="auto3">
  <mat-autocomplete #auto3="matAutocomplete"  [displayWith]="displayFn">
    <mat-option *ngFor="let opt of filterdFacOption | async" [value]="opt">
    {{opt.name}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

我使用以下方法解决此问题，

Mat-AutoComplete in FormGroup CustomFilter

及以下问题

How to use mat-autocomplete (Angular Material Autocomplete) inside FormArray (Reactive Forms)

如果有人有好的解决方案，请帮助我完成这项工作。