[英]angular 2 input datalist autocomplete
const books: 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>book_id</label>
<input list="book_list" formControlName="book_id">
<datalist id="book_list">
<option *ngFor="let book of books" [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">
book not selected</small>
</div>
</form>
I am trying to do autocomplete input field using input datalist. 我正在尝试使用输入数据列表执行自动完成输入字段。 Here i want to allow search by book title but want to get book id once one book is selected in angular 2. 在这里,我要允许按书名进行搜索,但是要在角度2中选择一本书后就获取书ID。
that should be [value]
not [ngvalue]
应该是[value]
而不是[ngvalue]
In component you can extract like below: 在组件中,您可以如下提取:
save(form) {
console.log(form.book_id.value);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.