On a page, I have a form consisting of three different groups
this.form = this.formBuilder.group({
profile: this.formBuilder.group({
name: [''],
description: [''],
}),
members: this.formBuilder.array([
this.formBuilder.group({
name: [''],
experience: [''],
}),
]),
drinks: this.formBuilder.array([
this.formBuilder.group({
name: [''],
description: [''],
}),
]),
});
In my specific case, I need to send these three form groups to three separate endpoints.
sendForm() {
const team = this.form.controls.profile.value;
const members = this.form.controls.members.value;
const drinks = this.form.controls.drinks.value);
this.teamService.sendTeam(team).subscribe((response) => {
console.log(response);
});
this.teamService.sendMembers(members).subscribe((response) => {
console.log(response);
});
this.teamService.sendDrinks(drinks).subscribe((response) => {
console.log(response);
});
}
I am seeking advice on the best practices for handling such requests. While using three subscribes may not be the most efficient method, it is currently the simplest one. Appreciate any guidance you can provide.