Basically I have a form with question and an input field for the answer like on the screenshot below.

How do I get the question id and answer as an array of objects using formcontrol the same structure on the expected output below.

The answer from the object is the answer from each text area fields and the qid is the qid from the questions. Any idea would be much appreciated. Thanks.

#html code

     <form *ngIf="modelForm" [formGroup]="modelForm">
        <div *ngFor="let q of questions;let i = index;" >
            <div class="confirm-detail-two">
                <div class="p-label">{{q.question}}</div>
            </div>
            <mat-form-field appearance="fill" class="details-field-container" style="padding-bottom:10px;">
                <mat-label>Details</mat-label>
                <textarea class="details-textarea" formControlName="questionAnswer" matInput matInput></textarea>
            </mat-form-field>
          </div>
      </form>

#list of questions I am looping

  const questions = [
    {
        "qid": 1,
        "question": "What is my name ?"
    },
    {
        "qid": 10,
        "question": "Where do I live?"
    }
]

#tscode

 ngOnInit(): void {       
    this.modelForm = this._createModelForm();
  }

  private _createModelForm(): FormGroup {
    return this.formBuilder.group({
      accountId:this.model.accountId,
      questions:[this.model.questions || []],
      questionAnswer:[this.model.questionAnswer || []],
    });
  }

#expected output - the this.modelform.value , this should be the data structure after the user add answer to each field.The answer from the object is the answer from each text area fields and the qid is the qid from the questions.

{
     "questionAnswer": [{
        "qid" :1,
        "answer" :"Josh"
        },
        {
        "qid" :10,
        "anwer" :"New York"
        }],
}