angular - 在测验中处理多个单选按钮并且还面临找不到路径为 : 的控件

Question

实现包含多个 MCQ 的测验。但是我在选择单选按钮时遇到了问题。

我的问题也来自数据库和选项。

emp-training.component.html

 <form [formGroup]="resultForm" (ngSubmit)="onSubmit()" novalidate> 
           <mat-accordion class="quiz-accordion" multi formArrayName="quizResultRequestList"
               *ngFor="let question of list.questionList; let i = index">
                   <div [formGroupName]="i">
                                                       
                        <mat-expansion-panel>
                           <mat-expansion-panel-header>
                             <mat-panel-title >
                               {{question.questionText}}
                             </mat-panel-title>
                           </mat-expansion-panel-header>

               <div formArrayName="questionList" multi *ngFor="let option of question.optionList; let k=index">
                                                        <div [formGroupName]="k">
                                                        <input type="radio" formControlName="selectedOptionId" [id]="i" value="{{question.id}}-{{option.id}}">
                                                        <mat-label>{{option.optionText}}</mat-label>
                                                    </div>
                                                    </div>
                                                </mat-expansion-panel>
                                            </div>
                                            </mat-accordion>
                                            {{resultForm.value | json}}
                                        </form>

想要创建如下 Json 的输出，因为无法获得多个问题的准确输出:-

{
   "employeeId":2501,
   "trainingId":1,
   "department":{
      "id":23
   },
   "quizResultRequestList":[
      {
         "quizId":2,
         "questionList":[
            {
               "id":1,
               "selectedOptionId":2
            },
            {
               "id":2,
               "selectedOptionId":5
            },
            {
               "id":5,
               "selectedOptionId":13
            }
         ],
         "quizDuration":100
      }
   ]
}

emp-training.component.ts

createForm(){
    this.resultForm = this.fb.group({
      employeeId:[(JSON.parse(window.sessionStorage.getItem('empDetails')).id)],
      trainingId:[this.id],
      quizResultRequestList:this.fb.array([this.initQuestion()])
    })
  }


  initQuestion():FormGroup{
    return this.fb.group({
      quizId:[this.quizIdTemp],
      questionList:this.fb.array([this.initOption()])
    })
  }

  initOption():FormGroup{
    return this.fb.group({
      id:[''],
      selectedOptionId:['']
    })
  }

同样面临错误 - 无法找到具有路径的控件:

Answer 1

因为我正在从 ngFor 获取数据，所以无需提及 FormArray 和 FormControl，只需在单选点击事件上处理即可。