Angular Forms：在自动完成选择时，定义与输入值不同的 formcontrol 值

Angular Forms: On autocomplete select, define formcontrol value different to input value

如何屏蔽表单控件名称的输入。
HTML
当显示自动完成时，您只会看到 airport.name。
当用户选择一个机场时，我想在输入值中显示 airport.name 但在 formControl 中我想将机场对象设置为值，因为当我进行搜索时，我需要的不仅仅是一个字符串来查找数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<mat-form-field>
<input
matInput
formControlName=”departure_airport”
#el_departure_input
class=”[ flight-travel-form__airport__input ][ typography-sub-heading ]”
value=””
placeholder=”Departure”
[matAutocomplete]=”auto”
/>
</mat-form-field>

<mat-autocomplete #auto=”matAutocomplete”>
<mat-option *ngFor=”let airport of active_search_suggestions$ | async” [value]=”airport” class=”ten-autocomplete”>
{{ airport.name.toLowerCase() }}

<span class=”typography-small-text”>{{ airport.iata_code }}</span>
Any Airport
</mat-option>
</mat-autocomplete>

Angular Forms: On autocomplete select, define formcontrol value different to input value

猜你喜欢