Как отправить массив объектов в реактивные формы с данными, поступающими из API

Question

Мне нужно отправить данные в этом формате в API:

{
  "event_id": "event_id",
  "buyer":{
    "first_name ":"first_name",
    "last_name":"last_name",
    "email":"email"
  },
  "attendees":[
                {
                  "first_name":"last_name",
                  "last_name":"last_name",
                  "email":"email",
                  "ticket_category_id": "ticket_category_id"
                },
                {
                  "first_name":"last_name",
                  "last_name":"last_name",
                  "email":"email",
                  "ticket_category_id": "ticket_category_id"
                }
              ]
}

В массиве участников мне нужно набрать sh a "ticket_category_id" из данных, поступающих из API вместе с полями ввода для отправки.

Вот функция API, которая отображает данные:

getOpenEventTicket(){
     var id = "RwgnUvDpEicFA5pWFMiB"
    const eventId = this.eventId
    this.paymentService.getOpenTicketCategory(id).subscribe( (res:any) => {
      this.ticketDetails = res;
      console.log("details",res)
      // console.log("price",this.total )
    })
  }

А вот текущая настройка для формы:

userprofileform =this.fb.group({
    buyer: this.fb.group({
    firstname: ['', Validators.required],
    nickname: ['', Validators.required],
    email:['', Validators.required]
    }),
    attendees: this.fb.array([
    ])
  })


   get attendees(): FormArray {
    return this.userprofileform.get('attendees') as FormArray;
  }


 onSubmit(){
    console.log(this.userprofileform.value)
  }

Код в шаблоне:

 <form class="col-8" [formGroup]="userprofileform" (ngSubmit)="onSubmit()">

   <!-- static section starts-->

 <h5 class="mt-3">Event Name: <p>Eddies</p></h5>
  <div class="form-group ml-3">
    <input 
    type="checkbox" 
    class="form-check-input" 
    id="exampleCheck1"
    >
    <label class="form-check-label" for="exampleCheck1">Copy Leader Info Here</label>
  </div>
  <br>
 <div class="form-group">
    <label for="formGroupExampleInput">Name</label>
    <input 
    type="text" 
    class="form-control" 
    id="formGroupExampleInput" 
    placeholder="Name"
    formcontrolname="firstname"
    >
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Nickname</label>
    <input 
    type="text" 
    class="form-control" 
    id="formGroupExampleInput2" 
    placeholder="Nickname"
    formcontrolname="nickname"

    >
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">E-Mail</label>
    <input 
    type="email" 
    class="form-control" 
    id="formGroupExampleInput2" 
    placeholder="Email"
    formcontrolname="email"
    >
  </div>

<!-- static section ends-->



<!-- loop section -->

<ng-container
*ngFor="let ticket of ticketDetails| keyvalue; let i = index"
>
<div >
 <h5 class="mt-3">Event Name: <p>{{ticket.value.category_name}}</p></h5>
  <div class="form-group ml-3">
    <input 
    type="checkbox" 
    class="form-check-input" 
    id="exampleCheck1"
    >
    <label class="form-check-label" for="exampleCheck1">Copy Leader Info Here</label>
  </div>
  <br>
 <div class="form-group">
    <label for="formGroupExampleInput">Name</label>
    <input 
    type="text" 
    class="form-control" 
    id="formGroupExampleInput" 
    placeholder="Name"
    >
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Nickname</label>
    <input 
    type="text" 
    class="form-control" 
    id="formGroupExampleInput2" 
    placeholder="Nickname"

    >
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">E-Mail</label>
    <input 
    type="email" 
    class="form-control" 
    id="formGroupExampleInput2" 
    placeholder="Email"

    >
  </div>
</div>
</ng-container>

Итак, как мне l oop с помощью элементов управления формы и передавать данные в каждое поле уникально "ticket_category_id" ?

Мой текущий настроен на stackblitz :