how to add array object inside another array in angular 4

Question

I have created a form using formbuilder. I tried to create data array object into users object, but it's adding as a object inside users array. Below is my code

export class AppComponent  {
  users = [ { "firstname": "ramu", "lastname": "mothukuri", "city": "chennai", "street": "sivan koiil street", "pin": "600024","data":[{"company":"xyz","address":"yyy"}] },
  { "firstname": "ramu", "lastname": "mothukuri", "city": "chennai", "street": "sivan koiil street", "pin": "600024","data":[{"company":"xyz","address":"yyy"}] },
  { "firstname": "ramu", "lastname": "mothukuri", "city": "chennai", "street": "sivan koiil street", "pin": "600024","data":[{"company":"xyz","address":"yyy"}] }
  ]
  myForm: FormGroup;

constructor(private fb: FormBuilder) { 
this.myForm = this.fb.group({
users: this.fb.array([])
})

let formArr = <FormArray>this.myForm.controls.users;
formArr.push(fb.group({
firstname: this.users[0].firstname,
lastname: this.users[0].lastname,
street: this.users[0].street,
data:this.users[0].data
}))
}

  onMy(form){

    console.log(form);
  }
}

I have attached the screen shot please check

But i tried to write the code but i am not getting below is the expected format of json form values

Form values: {

 "users": [
    {
      "firstname": "ramu",
      "lastname": "mothukuri",
      "street": "sivan koiil street",
      "data": [{
        "company": "xyz",
        "address": "yyy"
      }]
    }
  ]
}

Below is the code URL

CODE URL

Answer 1

You need to declare data as a formArray

 let dataArr = new FormArray([]);
    dataArr.push(new FormGroup({
      'company': new FormControl(this.users[0].data[0].company),
      'address': new FormControl(this.users[0].data[0].address)
    }));


    let formArr = <FormArray>this.myForm.controls.users;
    formArr.push(fb.group({
      firstname: this.users[0].firstname,
      lastname: this.users[0].lastname,
      street: this.users[0].street,
      data: dataArr
    }));

Answer 2

In your form group declaration in the control data create an another formgroup instead of just value.

let formArr = <FormArray>this.myForm.controls.users;
formArr.push(fb.group({
  firstname: this.users[0].firstname,
  lastname: this.users[0].lastname,
  street: this.users[0].street,
  data:this.fb.group({
     company: this.users[0].data.company, 
     address: this.users[0].data.address })
}))
}

This way you will get data as array.