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

Question

我正在尝试以反应角形式处理多个基于mcq的问题。但是问题是，当我单击一个问题的选项时，其他问题的选择消失了。我知道ID和值需要固定，并在其中使用问题。但是不知道具体如何。

这里是代码。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>

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

我建议您使用form array。