How can I set mat-autocomplete in order to get the selected option ID?
<mat-form-field>
<input type="text" matInput
[formControl]="autocompleteControl"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let book of books" [value]="book.id"> <!-- THIS SHOW THE ID ON THE UI -->
{{ book.title }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
If I change "book.title" for "book.id" at [value] attribute, the UI shows the ID on the autocomplete input, which is not good. Where should I put the "book.id" in order to ask for him later on my component.ts?
You could use displayWith
to display a specific value for an option.
It takes a mapping function that would get the value
of the mat-option
and return the display value for the mat-option
Give this a try:
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
/**
* @title Simple autocomplete
*/
@Component({
selector: 'autocomplete-simple-example',
templateUrl: 'autocomplete-simple-example.html',
styleUrls: ['autocomplete-simple-example.css'],
})
export class AutocompleteSimpleExample {
myControl = new FormControl('1');
options: string[] = ['One', 'Two', 'Three'];
books: Array<{ id: string; title: string }> = [
{ id: '1', title: 'Book 1' },
{ id: '2', title: 'Book 2' },
{ id: '3', title: 'Book 3' },
{ id: '4', title: 'Book 4' },
];
getTitle(bookId: string) {
return this.books.find(book => book.id === bookId).title;
}
onSubmit() {
console.log(this.myControl.value);
}
}
And in the template:
<form class="example-form">
<mat-form-field class="example-full-width">
<input
type="text"
placeholder="Pick one"
aria-label="Number"
matInput
[formControl]="myControl"
[matAutocomplete]="auto">
<mat-autocomplete
#auto="matAutocomplete"
[displayWith]="getTitle.bind(this)">
<mat-option
*ngFor="let book of books"
[value]="book.id">
{{book.title}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<button (click)="onSubmit()">Submit</button>
</form>
Here's a Working Sample Demo Code your ref.