I am currently working with Angular 8 and have an API structured like this:
{
"no": "s01",
"id": 1,
"details_id": {
"install": "Y"
"unitprice": "100.000000000000000",
"weight": "1.000000000000000"
},
"qty": 1,
"remarks": "ok"
}
My goal is to patch data in a format similar to the one shown below using Angular:
{
"Header_img": null,
"details": [
{
"install": "",
"remarks":""
"del_details": [
{
"qty": "",
"unitprice":"",
"weight": ""
}
]
}
]
}
ngOnInit(): void {
this.Form = this.fb.group({
Header_img: [],
podetails: this.fb.array([this.addpodetailsGroup()])
});
}
addpodetailsGroup() {
let group= new FormGroup({
install: new FormControl(''),
d_details: this.fb.array([
this.d_detailsGroup()
])
}
)
return group}
d_detailsGroup(): FormGroup {
return this.fb.group({
qty: new FormControl(''),
"unitprice": new FormControl(''),
"weight": new FormControl(''),
});
}
Here is the function for patching the data:
getdDetails(){
let id = this.iddata
this.dataService.getdetails(id)
.subscribe((results) => {
let datas = results["data"];
this.dList = datas
})
}
getdetailsForQuantity(data){
let id = data.id
console.log('id value data getdetailsForQuantity',id)
this.dataService.getdetailsfor(id)
.subscribe((result: any) => {
this.install = result.details_id.installationrequired
this.unitprice = result.details_id.unitprice
this.form.patchValue({
details:[{
install: this.install
d_details: this.unitprice
}]
})
})
}
Need assistance on patching data in form array? How can I use reactive forms to patch data when the backend data structure does not match the required format for submission?