Angular表单：自动完成选择时输入框与表单控件值分离及掩码设置

我来帮你搞定这两个需求，分两部分详细说明：

一、实现mat-autocomplete显示机场名称但存储完整对象 #

你当前的代码已经把mat-option的[value]绑定为完整的airport对象，所以表单控件会正确存储整个对象，但输入框会默认显示对象的toString()结果（不是你想要的名称）。这里需要用到mat-autocomplete的displayWith属性来控制输入框的显示内容：

1. 在组件类中添加一个方法，用来返回要显示的机场名称：

displayAirportName(airport: any): string {
  // 处理空值情况，避免报错
  return airport ? airport.name : '';
}

2. 修改模板中的mat-autocomplete，绑定displayWith属性：

<mat-form-field> 
  <input matInput formControlName="departure_airport" #el_departure_input 
         class="[ flight-travel-form__airport__input ][ typography-sub-heading ]" 
         placeholder="Departure" [matAutocomplete]="auto" /> 
</mat-form-field> 
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayAirportName"> 
  <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>

这样设置后，用户选择机场时，输入框会显示airport.name，而表单控件departure_airport会存储完整的airport对象，完全满足你多维度搜索的需求。

二、为输入框设置掩码 #

Angular中常用ngx-mask库来实现输入掩码，步骤如下：

1. 先安装依赖：

npm install ngx-mask --save

2. 在你的模块（比如AppModule）中导入并配置NgxMaskModule：

import { NgxMaskModule, IConfig } from 'ngx-mask';

const maskConfig: Partial<IConfig> = {
  validation: false,
};

@NgModule({
  imports: [
    // 其他导入
    NgxMaskModule.forRoot(maskConfig)
  ]
})
export class AppModule { }

3. 在输入框上添加mask指令，根据你的需求设置掩码规则。比如如果要限制输入为3位大写字母（匹配IATA码格式），可以这样写：

<input matInput formControlName="departure_airport" #el_departure_input 
       class="[ flight-travel-form__airport__input ][ typography-sub-heading ]" 
       placeholder="Departure" [matAutocomplete]="auto"
       mask="AAA" uppercase />

这里的mask="AAA"表示允许3个字母，uppercase会自动把输入转为大写。你可以根据实际需求调整掩码规则，比如支持数字、特殊符号等组合。

内容的提问来源于stack exchange，提问作者Chris Tarasovs