表单mat-autocomplete显示字符串，提交对应ID的最佳实现方案？

这其实是Angular Material autocomplete非常常见的需求，最佳方案就是利用它的displayWith属性来分离显示值和实际存储值——用户看到的是友好的字符串选项，而FormControl里实际存储的是后端需要的ID，提交时直接用这个ID就行，完全不用额外转换。

我给你一步步拆解实现：

1. 先定义数据结构 #

首先我们需要明确从数据库返回的ID-字符串对的结构，比如定义一个接口：

interface Trade {
  id: number; // 后端需要的查询ID
  name: string; // 显示给用户的字符串
}

2. 组件类（Component.ts）核心逻辑 #

在组件里我们要处理表单初始化、数据获取、选项过滤，还有关键的displayWith函数：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

// 上面定义的Trade接口
interface Trade {
  id: number;
  name: string;
}

@Component({
  selector: 'app-trade-selector',
  templateUrl: './trade-selector.component.html',
})
export class TradeSelectorComponent {
  tradeForm: FormGroup;
  trades: Trade[] = []; // 从数据库获取的所有选项
  filteredTrades: Observable<Trade[]>; // 过滤后的选项列表

  constructor(private fb: FormBuilder) {
    // 初始化表单，tradeId控件用来存储选中的ID
    this.tradeForm = this.fb.group({
      tradeId: [null]
    });

    // 这里模拟从数据库获取数据，实际项目里换成你的服务调用
    this.trades = [
      { id: 1, name: "软件开发" },
      { id: 2, name: "UI设计" },
      { id: 3, name: "产品经理" }
    ];

    // 实现选项过滤：用户输入时实时筛选匹配的选项
    this.filteredTrades = this.tradeForm.get('tradeId')!.valueChanges.pipe(
      startWith(''), // 初始状态显示所有选项
      map(value => this._filterTrades(value))
    );
  }

  // 关键！告诉autocomplete要显示什么内容
  displayTrade(tradeId: number): string {
    if (!tradeId) return '';
    // 根据ID找到对应的Trade对象，返回它的name
    const matchedTrade = this.trades.find(trade => trade.id === tradeId);
    return matchedTrade ? matchedTrade.name : '';
  }

  // 过滤选项的私有方法，处理用户输入的筛选逻辑
  private _filterTrades(value: string | number): Trade[] {
    // 用户输入时是字符串，选中后是数字，所以要做类型判断
    const filterText = typeof value === 'string' ? value.toLowerCase() : '';
    return this.trades.filter(trade => 
      trade.name.toLowerCase().includes(filterText)
    );
  }

  // 表单提交：直接拿tradeId的值发给后端就好
  onSubmit() {
    if (this.tradeForm.valid) {
      // 这里的payload就是后端需要的格式，tradeId是选中的ID
      const submitPayload = {
        tradeId: this.tradeForm.value.tradeId
        // 其他表单字段可以在这里补充
      };
      console.log('提交给后端的数据:', submitPayload);
      // 替换成你的服务调用：this.yourService.submitData(submitPayload).subscribe(...);
    }
  }
}

3. 模板（Component.html）调整 #

把你的原模板修改成下面这样，重点是绑定displayWith和设置mat-option的value为ID：

<form [formGroup]="tradeForm" (ngSubmit)="onSubmit()">
  <mat-form-field class="form-group special-input">
    <input 
      type="text" 
      placeholder="Select a trade" 
      aria-label="Select a trade" 
      matInput 
      formControlName="tradeId"
      [matAutocomplete]="auto"
    >
    <!-- 绑定displayWith函数，指定显示逻辑 -->
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayTrade">
      <!-- 选项的value设置为trade.id，这样选中后表单存的是ID -->
      <mat-option *ngFor="let trade of filteredTrades | async" [value]="trade.id">
        {{ trade.name }} <!-- 显示给用户的字符串 -->
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <button type="submit" mat-raised-button color="primary">提交</button>
</form>

关键逻辑说明 #

• displayWith属性：这是核心，它让我们可以把FormControl里的实际值（ID）转换成用户看到的显示值（字符串），完美分离了数据存储和UI展示。
• mat-option的value：这里直接绑定trade.id，用户选择选项后，FormControl里就会存储这个ID，而不是整个Trade对象或者name，提交时直接取用即可。
• 过滤逻辑兼容：因为用户输入时是字符串，而选中后表单值是数字，所以过滤函数里做了类型判断，确保两种场景下都能正确筛选。

这个方案既简洁又符合Angular的最佳实践，完全满足你的需求：用户选字符串，提交发ID。

内容的提问来源于stack exchange，提问作者Matthew Flynn