[Fixed] Displaying multiple shipping addresses in Angular reactive Form

Issue

I am trying to display shipping addressses from the API , currently there are three addresses in the database but only one address is displaying 3 times

This is the Component Html Code

<div class="row" formControlName="shippingAddressForm">
                <div class="form-group col-6">
                  <h1 class="h3 mt-4">Shipping Address</h1>
                  <div *ngFor="let item of shippingAddress?.data">
                  <form 
                  [formGroup]='shippingAddressForm'
            (ngSubmit)="Save(shippingAddressForm.value)"
            >
             
     
             <br>        
             <app-text-input formControlName="country" [label]='"Country"'></app-text-input>
             <app-text-input [formControl]='shippingAddressForm.controls["phone"]' [label]='"Phone Number"'></app-text-input>
             <app-text-input  formControlName="name" [label]='"Name"'></app-text-input>
             
             <app-text-input [formControl]='shippingAddressForm.controls["email"]' [label]='"Email"'></app-text-input>
             <app-text-input [formControl]='shippingAddressForm.controls["address"]' [label]='"Address"'></app-text-input>
            
      
             <div class="row">
              <div class="col-sm-4">
              <label for="state">State</label>
              </div> 
              <select class="custom-select form-group" 
              style="width: auto" 
              formControlName="state" 
              [class.is-invalid]='shippingAddressForm.get("state").errors
              && shippingAddressForm.get("state").touched'
              
             >
                <option  *ngFor='let state of selectedState?.data.data' [value]="state.id"> {{state.state}}</option>
              </select>
              </div>
    
              <div class="row">
                  <div class="col-sm-4">
                  <label for="city">City</label>
                  </div> 
                  <select class="custom-select form-group" 
                  style="width: auto" 
                  formControlName="city" 
                  [class.is-invalid]='shippingAddressForm.get("city").errors
                  && shippingAddressForm.get("city").touched'
                  
                 >
                    <option  *ngFor='let city of selectedCity?.data.data' [value]="city"> {{city}}</option>
                  </select>
                  </div>
               
                  </form>
                </div>

                </div>
              </div>
        

This is the TS component code

loadShippingAddress() {
    this.shippingaddressService.getShippingAddress().subscribe(address => {
      console.log('address data',address);
      this.shippingAddress = address;
     if(this.shippingAddress) {
       console.log('if address',address);
       
         for (let item of this.shippingAddress.data)   
      this.shippingAddressForm.patchValue(item);
     }
    }, error => {
      console.log(error);
    })

} This is the data in console log showing all shipping addresses in the database

This is the result in the application

Solution

here i am considering that your form has only following fields 
country,phone

here on init just declared form structure and in loadShippingAddress() added the actual logic to create the form

yourForm : FormGroup;

ngOnInit()
{
    this.yourForm = new FormGoup({
        ‘addressess’: new FormArray([]) 
    })
}

loadShippingAddress() {
     let addressess = new FormArray([]);
    
    this.shippingaddressService.getShippingAddress().subscribe(address => 
    {
         this.shippingAddress = address;
         if(this.shippingAddress) 
         {
             
                   for(let address of this.shippingAddress.data)
                   {
                          addressess.push(
                            new FormGroup({
                              'country':new FormControl(address.country),
                              'phone':new FormControl(address.phone)
                            })
                          )
                   }
        
         }
         
         
         this.yourForm = new FormGoup({
            'addressess' :  addressess
         })
         
    }, error => 
    {
        console.log(error);
    })
    
}

//getter used in html to loop through address
get adddressControls(){
    
     return (<FormArray>this.yourForm.get('addressess')).controls
}

html

<form [formGroup]='yourForm'>
<div class="row">
        <div class="col-xs-12" formArrayName="addressess">
          <div
          style="margin:5px;"
          class="row"
          *ngFor="let address of adddressControls;let i = index"
          [formGroupName]="i"
          >
            <div class="col-xs-8">
             <app-text-input formControlName="country" [label]='"Country"'></app-text-input>
            </div>
            <div class="col-xs-2">
              <app-text-input formControlName="phone" [label]='"Phone Number"'></app-text-input>
            </div>
          </div>
          <hr>
        </div>
 </div>
 </form>