angular - 处理测验中的多个单选按钮并且还面临找不到路径控制:
问题描述
实施包含多个 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:['']
})
}
解决方案
由于我正在从 ngFor 获取数据,因此无需提及 FormArray 和 FormControl 只需在无线电单击事件中处理它即可。
推荐阅读
- c# - 框架分离并使其通用
- hadoop - 可迭代在 mapreduce 减少任务中不起作用
- docker - Docker:使用systemd在centos7容器上初始化后运行命令
- r - 询问在 R 中编写代码的更好方法
- swift - 如何在 UIDatePickerView 中仅使用日月年
- sorting - SAS:数据步骤视图->错误:按变量排序不正确
- r - R、Bonferonni 和 Holm 测试
- java - 动态或在用户 PC 上上传和解密时的 AES 加密
- javascript - 如何使此代码与异步一起使用
- javascript - 连接两个变量并使用javascript查找数组值位置