Question

在我的代码中，我有一些问题的数据，这些问题可以动态地构建一个嵌套表单。有“多”和“单”两种问题

我在下面的链接中为页面中的表单提供了一些代码。根据每个问题的问题类型，我可能希望显示其mat-checkbox或mat-radio按钮的选项。

https://stackblitz.com/edit/angular-uezhjg

在访问问题类型为“多个”的FormControlName response_options时，我能够正确使用“垫子复选框”，但是当我为收音机尝试相同的设置时，我遇到了问题，即无法正常工作。我已经注释了执行该部分的代码。我该如何实现？

Answer 1

您必须更新html，因为对于单个问题，在您的情况下{{j}}在div中是未知的。

<div *ngIf="take_exam_form">
<form [formGroup]="take_exam_form" (submit)="submitAnswers()">
    <div class="question" formArrayName="questions" *ngFor="let question of take_exam_form.controls.questions.controls;let i = index">
        <hr>
        <div formGroupName="{{i}}">
            <div class="question"> {{i+1}}.) {{question.value.question}} </div>
            <ng-container formArrayName="response_option" *ngFor="let response_option of question.controls.response_option.controls;let j = index">
            <div *ngIf="question.value.question_type == 'multiple'">

                    <div formGroupName={{j}}>
                        <mat-checkbox formControlName="answered"> {{response_option.value.option_value}} </mat-checkbox>
                    </div>

            </div>
            <div *ngIf="question.value.question_type == 'single'">
                  <div formGroupName={{j}}>
                      <mat-radio-group
                      aria-labelledby="example-radio-group-label"
                      formControlName="answered"
                      class="example-radio-group">
                      <mat-radio-button class="example-radio-button">
                          {{response_option.value.option_value}} 
                      </mat-radio-button>
                    </mat-radio-group>
                   </div>
              </div>
              </ng-container>
        </div>
    </div>
    <hr>
    <button mat-raised-button color="primary" type="submit">Submit Answers</button>
</form>

Answer 2

我认为这是使用单选按钮时的一个基本思想，即结果将只有一个值，而复选框将具有与其可以具有的复选框数量相同的值。我更改了代码，以在问题级别针对“单个”类型的问题获取已回答属性，并在选项级别针对“多个”类型的问题进行回答。

Angular Mat Radio FormControlName不起作用

2 个答案: