Calling endpoint for fromControl from FormArray and got 500, 400 or 404 errors randomly

I have a formArray that holds a formGroup. For one formControl I need to call an endpoint and populate it with the data.

In my component:

ngOnInit() {
this.service.getInitialData().pipe(take(1)).subscribe(result => {
this.form = this.service.populateGroup(result);
});
}


In my service:

public populateGroup(items: any[]) {
return this.formBuilder.group({
items: this.formBuilder.array(
this.populateArray(items)
),
});
}

private populateArray(items: any[]) {
return items.map((item: any) => this.populateGroupInsideArray(item));
}

private populateGroupInsideArray(item: any) {
return this.formBuilder.group({
id: this.formBuilder.control(item.id),
parameters: this.createParametersGroup(item)
}),
});
}

private createParametersGroup(item: any): FormGroup {
const group = this.formBuilder.group({});

of(item)
.pipe(
concatMap((item: any) =>
this.endpointService.getParameters(item.name)
)
)
.subscribe((result) => {

Object.keys(module).forEach((key) => {
group.addControl(key, this.formBuilder.control(result.param);
});
})

return group;
}


I thinks is something wrong with this piece of code:

of(item)


because item is just an object that comes one by one for each iteration.

My error is that I have 500, 400 or even 404 errors randomly. If I call the endpoint for each item manually it works fine. I think is something wrong with my code, but I don't know how to fix it.

Many thanks!

Continue reading...