Мат-Автозаполнение нескольких полей

Question

Я использую Mat-Autocomplete, но по какой-то причине он работает только тогда, когда я использую 1 поле, когда я добавляю другое второе поле, что-то странное происходит.

Как в поле 1, так и в поле 2 В моем раскрывающемся списке отображаются те же параметры, которые доступны только при редактировании поля 2.

Возможно ли вообщеимеют более 1 поля, я никогда не вижу примеров по этому вопросу.

FIELD1

<div class="col input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">Sender</span>
  </div>
  <mat-form-field>
  <input matInput [matAutocomplete]="auto" type="text" class="form-control" (ngModelChange)="change()" [(ngModel)]="terms[sender]" [ngModelOptions]="{standalone: true}">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let document of documents" [value]="document._source.field.Sender">
      <span>{{document._source.field.Sender}}</span>
    </mat-option>
  </mat-autocomplete>
  </mat-form-field>
</div>

FIELD2

    <div class="col input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">Receiver</span>
  </div>
  <mat-form-field>
    <input matInput [matAutocomplete]="auto" type="text" class="form-control" (ngModelChange)="change()" [(ngModel)]="terms[receiver]" [ngModelOptions]="{standalone: true}" >
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let document of documents" [value]="document._source.field.Receiver">
        <span>{{document._source.field.Receiver}}</span>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

Answer 1

Два автозаполнения имеют одно и то же имя auto, они должны иметь разные имена:

<input matInput [matAutocomplete]="auto1"...
<mat-autocomplete #auto1=...
...
<input matInput [matAutocomplete]="auto2"...
<mat-autocomplete #auto2=...