Question

通常我有一个对象的对象 - ＆gt; filteredDrivers。

单个对象如下所示：

DRIVER_ID: 99 DRIVER_NAME: "JOHN SNOW"

我在md-autocomplete中使用

<md-input-container>
  <input type="text"
         name="driver"
         mdInput
         [mdAutocomplete]="auto"
         placeholder="Driver"
         ngModel
         >
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
  <md-option *ngFor="let driver of filteredDrivers| async" [value]="driver"  
             ngDefaultControl>
    {{ driver.DRIVER_NAME}}
  </md-option>
</md-autocomplete>

我想通过提交表单传递整个对象，但在输入中我想只查看driver.DRIVER_NAME。

如果我在输入中传递[value]="driver"之类的整个驱动程序，请参阅[object Object] 和表单提交给我完整的对象

但是当我使用[value]="driver.DRIVER_NAME"时，我可以看到我想要的内容 - JOHN SNOW但是表单提交只给我driver.DRIVER_NAME

如何通过提交表单传递整个对象并在输入中仅查看driver.DRIVER_NAME属性？

Answer 1

在Angular Material docs中清楚地记录了它 Autocomplete

具体来说：

设置单独的控制和显示值

如果您想要选项的控制值（表单中保存的内容）   与选项的显示值不同（显示在...中）   实际的文本字段），你需要设置displayWith属性   你的自动完成元素。一个常见的用例可能是你   想要将数据保存为对象，但只显示其中一个   选项的字符串属性。

要使其工作，请在映射的组件类上创建一个函数   控制值到所需的显示值。然后将它绑定到   autocomplete的displayWith属性。
<md-input-container>
   <input type="text" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
   <md-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{ option.name }}
   </md-option>
</md-autocomplete>

如何将整个对象从md-autocomplete angular 4传递给输入

1 个答案: