Angular отправка формы на разные конечные точки

Question

У меня есть форма на странице с тремя группами форм

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: [''],
    }),
  ]),
});

В моей ситуации мне нужно отправить эти три группы форм на трех разных конечных точках.

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);
    });
}

Что такое лучшие практики для таких запросов? Я знаю, что три подписки - это не лучший способ, но, безусловно, самый простой. Оцените ваш совет.

Answer 1

 import { forkJoin } from 'rxjs';


 sendForm() {
          const team = this.form.controls.profile.value;
          const members = this.form.controls.members.value; 
          const drinks = this.form.controls.drinks.value);

        forkJoin(
          this.teamService.sendTeam(team),
          this.teamService.sendMembers(members),
          this.teamService.sendDrinks(drinks),
        ).subscribe(([team, members, drinks]) => {

         // any funciton

        })
      }

Answer 2

const teamObservable$ = this.teamService.sendTeam(team);
const memberObservable$ = this.teamService.sendMembers(members);
const serviceObservable$ = this.teamService.sendDrinks(drinks);

combineLatest(teamObservable$, memberObservable$, serviceObservable$)
       .subscribe(([teamResponse, memberResponse, serviceResponse]) => { 
})