How to use Array inside formGroup

Ionic Framework ionic-v3
1

Hi there
I need my data to be in the following format

  "customer": {
    "first_name": "Steve",
    "phone": "+15142546011",
    "addresses": [
      {
        "address1": "123 Oak St",
        "city": "Ottawa",
        "country": "CA"
      }
    ]
  }

I write like bellow in .ts file

 constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      firstName: [null, Validators.compose([Validators.required])],
      phone: [null, Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(10), Validators.pattern('^(?:[0-9]{11},)*[0-9]{11}$')])],
      addresses: this.fb.array([
        this.addAddress()
      ])
    });
  }
  addAddress() {
    return this.fb.group({
      address1: [null, Validators.compose([Validators.required])],
      city: [null, Validators.compose([Validators.required])],
      country: [null, Validators.compose([Validators.required])],
    })
  }
}

  registerCustomer() {
    console.log('user info: ', this.form.value)
  }

this is my html

  <ion-card>
    <form [formGroup]="form" (ngSubmit)="registerCustomer()">
      <ion-list>
        <ion-item>
          <ion-label floating>{{"body.first_name" | translate}}</ion-label>
          <ion-input type="text" formControlName="firstName"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label floating>{{"body.phone" | translate}}</ion-label>
          <ion-input type="number" formControlName="phone"></ion-input>
        </ion-item>
        <div formArrayName="addresses">
          <ion-item>
            <ion-label floating>{{"body.address1" | translate}}</ion-label>
            <ion-input type="text" formControlName="address1"></ion-input>
          </ion-item>
          <ion-item>
            <ion-label floating>{{"body.city" | translate}}</ion-label>
            <ion-input type="text" formControlName="city"></ion-input>
          </ion-item>
          <ion-item>
            <ion-label floating>{{"body.country" | translate}}</ion-label>
            <ion-input type="text" formControlName="country"></ion-input>
          </ion-item>
        </div>
      </ion-list>
      <button class="button-signup" ion-button block>{{"header.register" | translate}}</button>
    </form>
  </ion-card>

but if I log in console show this error

eror
eror.png741×401 19 KB

please help someone, what is wrong with this code
the inner inputs is not dynamic, its always 3 inputs if is there any other way to format my post body request please let me know.

2

Your adress1/city/country is in an array, so you need to access it like that.

<ion-label floating>{{"body.addresses[0].address1" | translate}}<ion-label>

Same thing for city and country.

3

dear @MattE thanks for replying me
there is not the problem about displaying data in view.
problem is; I want to send my data to api in this format

  "customer": {
    "first_name": "Steve",
    "phone": "+15142546011",
    "addresses": [
      {
        "address1": "123 Oak St",
        "city": "Ottawa",
        "country": "CA"
      }
    ]
  }

how to make the inputs in the template to have the above format
I hop you get me

4

this is a translation there is nothing to do with it