Create FormArray from api Data - html

Question

I have data from an API, like this:
{ actions: 1, created_at: "2020-11-27 18:13:50", id: 18, payment: "0.00", change: "A" }
And I need to send back the data modified by user, I am using Reactive Forms for this, I am showing the data with Angular Material tables.
I have an idea that it would be more or less like this:
this.form = fB.group({data: this.fB.array( [fB.group({here.the.group}} )
How can I create the formArray from the data I receive dynamically? The idea is to be able to edit from the table and send the new formArray as the new data

Answer 1

You can use setValue or patchValue, I like patchValue as it comes with fewer challenges in setting up
Lets say your data is like below
{
actions: 1,
created_at: "2020-11-27 18:13:50",
id: 18,
payment: "0.00",
change: "A",
data: [
{ id: 1, name: 'item 2'},
{ id: 2, name: 'item 3'},
{ id: 3, name: 'Item 3'}
]
}
You can implement below approach to set your form
this.form = fB.group({
actions: [''],
payment: [''],
change: [''],
data: this.fb.array([])
})
get formDataArray() {
return this.form.get('data') as FormArray
}
ngOnInit() {
this.myService.getData().subscribe(({actions, payment, change, data })=> {
this.form.patchValue({ actions, payment, change });
data.forEach(({id, name})=> {
this.formDataArray.push(
this.fb.group({id: [id], name: [name] })
)
})
})
}