Angular7-在处理表单中的无线电控制时处理多个问题时出错

Question

我正试图以反应角度的形式处理多个基于mcq的问题。但问题是，当我点击一个问题中的选项时，其他问题中的选择就会消失。我知道id和值有一些问题需要解决，并在其中使用question.problem。。。但不知道具体是怎么做的。

这是代码
HTML

<div class="mcq test" *ngFor="let mcq of mcqs">
<form (submit)="mcqSubmit($event)" [formGroup]="mcqForm" class=" mt-5 mb-4">
<h3 class="mt-3 p-3 font-weight-bold"><u>{{mcq.title}}</u></h3>
<div class="questions" *ngFor="let question of mcq.questions">
<div class="text-center justify-content-center assignment-item mb-4" >
<h4 class="mt-3 mb-3" >{{question.problem}}</h4>
<div *ngFor="let solution of question.solutions; let i = index" class="d-inline p-3 mr-3 ml-3">
<input type="radio" name="choice" id="radio{{i}}" [value]=solution.option formControlName="choice">
<span class="checkmark"></span>
<label for="radio{{i}}" class="mcq-item">  
{{i+1 +'.'+ solution.option | titlecase}}
</label>
<br *ngIf="(i+1)%2==0 then ifblock">
<ng-template #ifblock>
<br>
</ng-template>
</div>

</div>
</div>
<input type="submit" class="btn btn-primary d-block mx-auto mt-4" value="Submit" >
</form>
</div>

这里是有角度的部分。

this.mcqForm = this.fb.group({
choice: ['',Validators.required]
}); ```

Answer 1

如果我们简化代码的这一部分

<form (submit)="mcqSubmit($event)" [formGroup]="mcqForm">
<div class="questions" *ngFor="let question of mcq.questions">
<div class="text-center justify-content-center assignment-item mb-4" >
<h4 class="mt-3 mb-3" >{{question.problem}}</h4>
<div *ngFor="let solution of question.solutions; let i = index" class="d-inline p-3 mr-3 ml-3">
<input type="radio" name="choice" id="radio{{i}}" [value]=solution.option formControlName="choice">
<span class="checkmark"></span>
<label for="radio{{i}}" class="mcq-item">  
{{i+1 +'.'+ solution.option | titlecase}}
</label>
<br *ngIf="(i+1)%2==0 then ifblock">
<ng-template #ifblock>
<br>
</ng-template>
</div>

</div>
</div>
</form>

我们将看到

<form (submit)="mcqSubmit($event)" [formGroup]="mcqForm" class=" mt-5 mb-4">    <div *ngFor="let question of mcq.questions">
<h4>{{question.problem}}</h4>
<div *ngFor="let solution of question.solutions; let i = index">
<input type="radio" name="choice" id="radio{{i}}" [value]=solution.option formControlName="choice">
<label for="radio{{i}}" class="mcq-item">  
{{i+1 +'.'+ solution.option | titlecase}}
</label>
</div>
</div>
</form>

我希望您能看到，您正在同一表单组下呈现具有相同表单控件的输入框。

我建议你使用形式数组。