How to send value of *NgFor option select in Reactive Forms

Question

I have a form in Angular, the select option has data coming from a web api. What I want to know is how to assign the selected value to form value when sending at the moment it is just [object object]. The ngFor statement is:

<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>

Then in the component.ts file it is:

  u_address: new FormControl(this.customerAddress),

Any ideas?

Answer 1

Please use ngValue instead of 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>

Answer 2

Just try to the following code

[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>