Angular Mat-Autocomplete提交传ID且保留displayWith显示功能的方案

核心矛盾 #

用[value]="option"时，前端显示正常，但表单提交会把整个对象传给后端；改成[value]="option.id"能提交正确ID，但displayWith因为拿不到完整对象，选中后输入框空白。且输入框是formArray的动态项。

推荐解决方案（提交前转换数据） #

不需要修改前端模板，保持原有交互逻辑，只在表单提交时把对象转为ID：

步骤1：保留原有模板代码 #

继续使用[value]="option"让displayWith正常工作：

<mat-form-field appearance="outline" class="full-width-input">
  <mat-label>Expense Category</mat-label>
  <input type="text" aria-label="Assignee" matInput formControlName="expense_category_id" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayExpenseCategoryFn">
    <mat-option *ngFor="let option of filteredExpenseCategories[i] | async" [value]="option">
      {{option.category}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

步骤2：修改提交逻辑，转换数据 #

在表单提交方法中，遍历formArray的每一项，将expense_category_id从对象替换为对应的ID：

onSubmit() {
  // 深拷贝表单值，避免修改原表单的控件状态
  const submitData = JSON.parse(JSON.stringify(this.yourFormGroup.value));

  // 遍历动态生成的formArray项
  submitData.yourFormArrayName.forEach((item: any) => {
    if (item.expense_category_id) {
      // 将对象转为ID
      item.expense_category_id = item.expense_category_id.id;
    }
  });

  // 用转换后的submitData请求后端
  this.http.post('/your-api-endpoint', submitData).subscribe({
    next: (res) => {
      // 处理成功响应
    },
    error: (err) => {
      // 处理错误
    }
  });
}

备选方案（修改displayWith适配ID） #

如果需要控件实时值为ID，可以修改mat-option的value为ID，同时更新displayWith函数根据ID查找对应对象：

步骤1：修改模板的mat-option值 #

<mat-option *ngFor="let option of filteredExpenseCategories[i] | async" [value]="option.id">
  {{option.category}}
</mat-option>

步骤2：更新displayWith函数 #

组件中需维护完整的费用分类列表（比如从接口获取后存储），然后根据ID查找显示名称：

// 组件内定义完整分类列表
allExpenseCategories: ExpenseCategory[] = [];

// 从接口获取分类时赋值
ngOnInit() {
  this.expenseCategoryService.getCategories().subscribe(categories => {
    this.allExpenseCategories = categories;
  });
}

// 修改displayWith函数
displayExpenseCategoryFn(categoryId?: number): string | undefined {
  if (!categoryId) return undefined;
  // 根据ID查找对应的分类对象
  const matchedCategory = this.allExpenseCategories.find(cat => cat.id === categoryId);
  return matchedCategory ? matchedCategory.category : undefined;
}

方案对比 #

• 方案一无需改动前端交互逻辑，仅处理提交数据，实现简单，无额外查找开销，更推荐。
• 方案二适合需要控件值实时为ID的场景，但需维护完整分类列表，且每次显示都要执行查找。

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