Angular6 Material表单：输入框显示组合内容而非仅值的实现

当然可以！你不需要修改表单的实际值，只靠Angular Material的displayWith属性就能搞定——它专门用来帮你分离输入框的显示文本和表单绑定的值，完美匹配你的场景。

第一步：给组件加个显示处理函数 #

先在你的组件.ts文件里加个小函数，作用是根据表单里的code值，返回你想要显示的完整文本：

displayFn(code: string): string {
  // 先从你的数据列表里找到对应code的条目
  // 如果你用了async管道，建议把list的数据存到一个本地数组里（比如listData），方便这里查找
  const matchedItem = this.listData.find(item => item.code === code);
  // 找到就返回拼接后的文本，没找到就显示原code
  return matchedItem ? `${matchedItem.code} - ${matchedItem.name}` : code;
}

小提示：因为你的list用了async管道，最好在组件里订阅这个Observable，把数据存到本地数组（比如listData），这样查找的时候更方便，不用每次都处理Observable。

第二步：修改模板绑定displayWith #

然后把这个函数绑定到mat-autocomplete的displayWith属性上，原来的[value]="val.code"保持不变（这样表单值还是code）：

<mat-form-field>
  <input matInput [matAutocomplete]="auto" [formControl]="autoForm" formControlName="formg">
  <mat-autocomplete #auto="matAutocomplete" panelWidth="200" [displayWith]="displayFn">
    <mat-option *ngFor="let val of list | async" [value]="val.code" (onSelectionChange)="changed($event)">
      <span>{{val.code}} - {{val.name}}</span>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

这样设置之后，选完选项输入框会显示xxx - 名称的格式，但表单里formg的值依然是原来的code，完全满足你的要求！

额外说明 #

• displayWith就是干这个活的：让输入框显示友好的用户文本，同时表单里存的是业务需要的编码/ID，不用做任何值的转换。
• 如果你纠结“能不能纯HTML实现”，其实严格来说不行——因为要根据code找到对应的name，必须有一点逻辑处理，但这个函数真的非常轻量，完全不会影响你的表单逻辑，算是最接近纯HTML的解决方案了。

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