Mat-Autocomplete multiple fields

Question

I am using Mat-Autocomplete but for some reason it only works when I am using 1 field, when I add another second field something strange happens.

Both on field 1 as in field 2 I get the same options in my dropdown, these options are the options who should only be available when I edit field 2.

Is it even possible to have more than 1 field, I never see any examples on this matter.

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>

You should also provide your typescript code (*.component.ts) and if possible, a working [stackblitz](https://stackblitz.com/) — GCSDC, Dec 18 '18 at 00:52
I dont think this has anything to do with my typescript, the only thing i get from my ts is "documents", an object filled with documents :p — Robin Medland, Dec 18 '18 at 07:52

score 21 · Accepted Answer · answered Dec 18 '18 at 09:35

21

The two autocomplete have the same name auto, they need to have different names:

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

answered Dec 18 '18 at 09:35

Mel

5,837
10
37
42

10

Can we assign #auto1, #auto2,.... dynamically inside ngFor loop? – mark922 Dec 16 '19 at 16:00
You saved my day, thank you, I thought it was a default name – LSL Dec 24 '20 at 09:44
1

can the Id be #{{arrayIndex}} , when I try I get error. I need dynamic Id as I don't know how many of these will be there. – user606669 Dec 31 '20 at 20:28

Mat-Autocomplete multiple fields

1 Answers1