如何在响应式表单中发送 *NgFor 选项选择的值

Posted 2023-02-22

【中文标题】如何在响应式表单中发送 *NgFor 选项选择的值

【英文标题】：How to send value of *NgFor option select in Reactive Forms

【发布时间】：2019-08-12 07:40:36

【问题描述】：

我在 Angular 中有一个表单，选择选项的数据来自 Web api。我想知道的是如何在发送时将所选值分配给表单值，此时它只是[object object]。 ngFor 语句是：

<select class="form-select" formControlName="u_address" placeholder="Enter address">
   <option value="" disabled selected>Select your option</option>
   <option *ngFor="let item of customerAddress" [value]="item">
   item.address
   </option>
</select>

那么在component.ts文件中就是：

  u_address: new FormControl(this.customerAddress),

有什么想法吗？

【问题讨论】：

你能分享你的 customerAddress 对象吗？

【参考方案1】：

试试下面的代码

[value]="item.address"

<select class="form-select" formControlName="u_address" placeholder="Enter address">
   <option value="" disabled selected>Select your option</option>
   <option *ngFor="let item of customerAddress" [value]="item.address">
   item.address
   </option>
</select>

【参考方案2】：

请使用 ngValue 代替 value。

<select class="form-select" formControlName="u_address" placeholder="Enter address">
   <option value="" disabled selected>Select your option</option>
   <option *ngFor="let item of customerAddress" [ngValue]="item">
   item.address
   </option>
</select>

【讨论】：

如果你不需要一个对象，你可以使用 [value]，（Shohel 写了 [value]="item.adress"）。如果您需要整个对象，那么您必须使用 [ngValue]="item"

谢谢，需要对象，不知道这个修复