When I use the complex logic inside the concatMap operator to send a form, everything works fine. However, in my subscribe method, I am encountering an issue where additional http requests are being fired twice instead of once. I attempted to resolve this by using the takeLast operator, but it did not solve the problem. My goal is to ensure that the requests in the subscribe method are only made after all requests have been completed within the concatMap.
makeRequest(value) {
const team = toFormData(this.form.controls.profile.value);
this.teamService
.sendTeam(team)
.pipe(
concatMap(() => {
const tasks$ = [];
for (const [index, m] of this.form.controls.members.value.entries()) {
const member = toFormData(m);
if (m.id) {
tasks$.push(this.teamService.updateMember(member, m.id).pipe(take(1)));
} else if (!member.entries().next().done) {
if (member.has('name')) {
tasks$.push(this.teamService.createMember(member).pipe(take(1)));
} else {
(this.form.controls.members as FormArray).controls[index].markAllAsTouched();
this.scrollToFirstInvalidControl();
}
}
}
return tasks$.length ? concat(...tasks$) : EMPTY;
}),
)
.subscribe(() => {
this.teamService.getMembers().subscribe();
});
}
What should be done to ensure that only necessary requests are made?