Binding in mat-autocomplete control

#1 · March 29, 2019, 7:44 am

Dear @team,

I used mat-autocomplete control in my screen but i can't binding formControlName to default select.

Model

export class BootSettingResult {
  id: number;
  name: string;
}

HTML

<mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let item of filteredStates | async" [value]="state.id" formControlName="bootId">
        <span>{{item.name}}</span>
      </mat-option>
    </mat-autocomplete>

filteredStates

[{
id: 1,
name: client,
},
{
id: 2,
name: server,
},...
,
{
id: 5,
name: portal,
}]

I want to binding with value id: 5. (I used formControlName)

Please spend your time to help me: How to binding value to selected on mat-autocomplete control

Thanks,

John LE

#2 · April 6, 2019, 10:51 am

Hi,

<mat-form-field class="example-full-width">
    <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <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>

This eaxmple you can see in https://material.angular.io/components/autocomplete/examples

the [matAutocomplete]="auto" in the input combines the <mat-autocomplete #auto="matAutocomplete"> of the autocomplete

Regards Ingo

IMPORTANT!

This forum is now archived. Click here for the New Support Forum