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 enter image description here

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

• vince: What is the format you are hoping to get?
• ramu: Below is the format to get, just i want to get data as a array of object [ { "firstname": "ramu", "lastname": "mothukuri", "street": "sivan koiil street", "data":[ { "company": "xyz", "address": "yyy" }] } ] }
• David Anthony Acosta: Your question is sooooooooooo confusing...
• ramu: coool, just i want to format data as a array object, currently i got below format-data": { "company": "xyz", "address": "yyy" } expected format is data":[ { "company": "xyz", "address": "yyy" }].

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
 }));

• ramu: no, already i got form values, but i need set data as a array of object
• ramu: Current format [ { "firstname": "ramu", "lastname": "mothukuri", "street": "sivan koiil street", "data": { "company": "xyz", "address": "yyy" }} ] }, expected format is [ { "firstname": "ramu", "lastname": "mothukuri", "street": "sivan koiil street", "data":[ { "company": "xyz", "address": "yyy" }] } ] }

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.