const availableBooks: Array<{ id: number, title: string }> = [{id: 1, title: "book1"}, {id: 2, title: "book2"}, {id: 3, title: "book3"}, {id: 4, title: "book4"}];
<form [formGroup]="bookForm" novalidate (ngSubmit)="save(bookForm)">
<div class="form-group">
<label>Select Book</label>
<input list="book_list" formControlName="book_id">
<datalist id="book_list">
<option *ngFor="let book of availableBooks" [ngValue]="book.id">{{book.title}}</option>
</datalist>{{ bookForm.value | json }}
<!--display error message if book_id is not valid-->
<small [hidden]="bookForm.controls.book_id.valid">
Please select a book</small>
</div>
</form>
I am working on an autocomplete input field using datalist in Angular 2. I want to search by book title and retrieve the book ID once a book is selected.
- Currently, I am only getting the book title instead of the book ID.
- How can I map the book title to its corresponding ID in the input box when the form is in edit mode?