Angular Material Autocomplete问题：传ID同时保留输入框显示名称

这个问题其实是Autocomplete组件的常见需求——要让表单存储业务ID，但输入框显示友好的名称，核心就是利用Angular Material提供的displayWith属性来分离表单值和输入框显示内容。下面给你一步步拆解实现方案：

1. 理解核心逻辑 #

[value]属性决定的是表单控件最终存储的值，而displayWith则专门用来定义输入框要展示的文本。我们只需要把[value]绑定到option.id，再通过displayWith指定一个函数，让它根据ID返回对应的名称即可。

2. 组件类中添加显示函数 #

在你的DetailproductcreateComponent里，先定义一个displayFn函数，它接收表单存储的ID，从你的选项列表中找到对应的名称返回：

export class DetailproductcreateComponent implements OnInit {
  FormDetailProductCreate: FormGroup;
  // 假设这是你的产品类型选项列表（可以从API获取）
  productTypeOptions: any[] = [];
  filteredOptions: Observable<any[]>;

  ngOnInit() {
    // 初始化表单（这里对应的控件存ID）
    this.FormDetailProductCreate = new FormGroup({
      productTypeId: new FormControl(null)
    });

    // 加载选项列表（模拟API请求）
    this.loadProductTypes();
    // 初始化过滤逻辑
    this.initFilter();
  }

  // 加载产品类型选项
  loadProductTypes() {
    // 实际项目中替换成API请求
    this.productTypeOptions = [
      { id: 1, NameTypeProduct: "电子产品" },
      { id: 2, NameTypeProduct: "家居用品" },
      { id: 3, NameTypeProduct: "服饰配件" }
    ];
  }

  // 初始化选项过滤逻辑
  initFilter() {
    this.filteredOptions = this.FormDetailProductCreate.get('productTypeId').valueChanges.pipe(
      startWith(''),
      map(inputValue => {
        // 注意：用户输入的是名称，所以过滤要基于NameTypeProduct，而非ID
        const filterText = typeof inputValue === 'string' ? inputValue.toLowerCase() : '';
        return this.productTypeOptions.filter(option => 
          option.NameTypeProduct.toLowerCase().includes(filterText)
        );
      })
    );
  }

  // 核心：根据ID返回要显示的名称
  displayFn(productId: number): string {
    if (!productId) return '';
    // 从选项列表中匹配ID对应的名称
    const matchedOption = this.productTypeOptions.find(opt => opt.id === productId);
    return matchedOption ? matchedOption.NameTypeProduct : '';
  }
}

3. 修改模板中的Autocomplete配置 #

在模板里，给mat-autocomplete绑定displayWith，同时把mat-option的[value]改成option.id：

<form [formGroup]="FormDetailProductCreate">
  <mat-form-field appearance="fill">
    <mat-label>选择产品类型</mat-label>
    <input 
      type="text" 
      matInput 
      formControlName="productTypeId" 
      [matAutocomplete]="auto"
    >
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option 
        *ngFor="let option of filteredOptions | async" 
        [value]="option.id"
      >
        {{ option.NameTypeProduct }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

关键说明 #

• 表单控件productTypeId最终存储的是选中项的id，提交时直接传递这个值即可；
• 输入框始终显示NameTypeProduct，不管是选中选项后还是编辑场景下（只要表单初始值是ID，displayFn会自动匹配对应的名称）；
• 过滤逻辑要基于名称：因为用户输入的是名称文本，所以过滤时要比对NameTypeProduct，而不是ID，避免输入名称时无法筛选选项的问题。

内容的提问来源于stack exchange，提问作者Sergio Lopez