[英]submit value for mat-autocomplete
We have a mat-autocomplete
input on a form. 我们在表单上有
mat-autocomplete
输入。
The options are populated from a database, these are returns as an ID, String pair. 这些选项是从数据库中填充的,它们以ID,字符串对的形式返回。
I would like to allow the user to select based on the string value but submit the ID value with the form for a lookup when posted server side? 我想允许用户基于字符串值进行选择,但在发布服务器端时将ID值与表单一起提交以进行查找? What is the best solution for this please?
请问对此的最佳解决方案是什么?
My component.html is; 我的component.html是;
<mat-form-field class="form-group special-input">
<input type="text" placeholder="Select a trade" aria-label="Select a trade" matInput formControlName="trade" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" md-menu-class="autocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
<span [innerHTML]="option.name | highlight: toHighlight"></span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
Where option has a name and id field. 其中option具有名称和ID字段。
I have tried adjusting the [value]="option.name"
to [value]="option.id"
however this updated the text field in the auto complete to be the id value rather than the string? 我试图调整
[value]="option.name"
到[value]="option.id"
但是这个更新的文本字段的自动完成是id的值,而不是字符串?
You can add a simple 您可以添加一个简单的
(onSelectionChange)="selectedOption(option)"
on mat-option
, passing the binding of the data to the ts component. 在
mat-option
,将数据绑定传递到ts组件。 Then you can easily decide what value you should pass to the server. 然后,您可以轻松决定应将什么值传递给服务器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.