提交mat-autocomplete的值

Question

我们在表单上输入了mat-autocomplete。

选项从数据库填充，这些选项以ID，String对返回。

我想允许用户根据字符串值进行选择，但在发布服务器端时提交带有查找表单的ID值？请问最佳解决方案是什么？

我的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>

其中option具有名称和id字段。

我已尝试将[value]="option.name"调整为[value]="option.id"但是这会将自动完成中的文本字段更新为id值而不是字符串？

Answer 1

您可以添加一个简单的

(onSelectionChange)="selectedOption(option)"

on mat-option，将数据绑定传递给ts组件。然后，您可以轻松决定应将哪个值传递给服务器。