0

I have a list of object I want to use in a AutoComplete. When a option gets selected the formConttrol gets the value of the selected item. Now I don't care about the entire object, I only care about the ID.I changed the option to have the id as value, but then the textinput remains empty.

  <mat-option *ngFor="let option of filteredOptions | async" [value]="option.id">
    {{option.name}}
  </mat-option>

Example: https://stackblitz.com/edit/angular-b97y6e-jwm2jq?file=src%2Fapp%2Fautocomplete-display-example.ts

Is there any way to use a object attribute as value?

Robin Dijkhof
  • 18,665
  • 11
  • 65
  • 116

2 Answers2

1

The problem here is that [value] is always string. Use [ngValue] instead. Here you can pass objects and numbers (which are objects in javascript) etc.

Differences between value and ngValue in Angular 5

<mat-option *ngFor="let option of filteredOptions | async" [ngvalue]="option.id">
    {{option.name}}
</mat-option>
Daniel Klotzsche
  • 56
  • 1
  • 6
0

The problem is you bind wrong value here-> [value]="option.id"

Solutation

  <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
    {{option.name}}
  </mat-option>

in your filteredOptions there is not any id paramater that's why its not working So,

Change [value]="option.id" to [value]="option"

it will be work fine ! check updated code

https://stackblitz.com/edit/angular-b97y6e-hsmvqn?file=src%2Fapp%2Fautocomplete-display-example.html

Dako patel
  • 760
  • 4
  • 13