angular - 如何在 Reactive Forms 中发送 *NgFor 选项的值

Question

我在 Angular 中有一个表单，选择选项包含来自网络 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),

有什么想法吗？

Answer 1

请使用 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>