角度形式:在自动完成选择上，定义与输入值不同的形式控制值 [英] Angular Forms: On autocomplete select, define formcontrol value different to input value

问题描述

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

How to mask input for formcontrol name. HTML When the autocomplete is displayed you only see the airport.name. When users select an airport, I would like to display the airport.name in the input value but in formControl I would like to set the airport object as value because when I do a search I need more than a string to find data.

<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() }}
      <br>
      <span class="typography-small-text">{{ airport.iata_code }}</span>
      <div *ngIf="airport.object_type === 'airport_group'"> Any Airport</div>
    </mat-option>
  </mat-autocomplete>
</div>

推荐答案

您只需为< mat-选项>

只需为其创建一个堆栈闪电战: https://stackblitz.com/edit/angular-nj3saw

Just created a stackblitz for it: https://stackblitz.com/edit/angular-nj3saw

这篇关于角度形式:在自动完成选择上，定义与输入值不同的形式控制值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！