在 ngFor 中有一个 mat-radio-button 来处理反应式表单

Question

我一直在尝试使用带有反应形式的角形材料的单选按钮，同时使用厕所，但没有成功。我成功地使用了 html 本机单选按钮，但是当我更改为 mat-radio-buttons 时，在为“第二个”控件选择一个值时，它将为第一个控件设置相同的值。

我在这里做错了什么？下面的演示

https://stackblitz.com/edit/angular-68mtq8

Answer 1

从中删除表单控件，mat-radio-group因为您要将方法中的值分配setAnswer(answer : any)给特定控件，所以不需要将控件分配给组。

<mat-radio-group class="example-radio-group" [formControlName]="ctrls[currentQuestion]">

改成这个

<mat-radio-group class="example-radio-group">

修订

尝试将表单控件绑定到您的mat-radio-button结果会出现以下错误。

错误错误：没有名称为“func”的表单控件的值访问器

这样做的原因是因为mat-radio-button没有ControlValueAccessor指令，这也是您成功使用本机单选按钮的原因。

表单控制指令使用 ControlValueAccessor 指令与本机元素进行通信。每个可能的输入都有不同类型的 ControlValueAccessors。正确的值由值访问器指令的选择器选择。选择器基于类型<input>。当您有 type="radio" 时，将使用无线电的值访问器。

来自这个答案的解释

用于单选按钮的 Angular2 反应式表单 formControl

在这种情况下，使用方法在控件上设置值将是正确的方法...如果您不想使用该方法在 formControl 上设置值，则需要像您一样使用本机 html 按钮前。

修订版2

进一步阅读有关链接 SO 问题的最后一个答案，似乎有一种方法可以在不使用本机 HTML 按钮的情况下做到这一点。

• 这里的关键是迭代你的ctrls并为每个创建一个 mat-radio-group。
• 然后您必须使用 *ngIf 来比较 与 ，index以便 currentQuestion您只显示基于的正确组 currentQuestion

请参阅下面的 HTML。

<mat-card>
    <div id="questions-container">
        <div class="arrows" (click)="previousQuestion()">
            <div>
                <</div>
            </div>
            <div class="question-container">
                <form [formGroup]="form">

                    <h1>Question placeholder?</h1>
                    <div *ngFor="let ctrl of ctrls; let i = index">
                        <mat-radio-group *ngIf="currentQuestion == i" class="example-radio-group" [formControlName]="ctrl">
                            <mat-radio-button *ngFor="let answer of answers[currentQuestion]" [value]="answer.id">{{answer.label}}</mat-radio-button>
                        </mat-radio-group>
                    </div>
                </form>
            </div>
            <div class="arrows" (click)="nextQuestion()">
                <div>></div>
            </div>

        </div>
        <p>{{currentQuestion}}</p>
        <p>{{ctrls[currentQuestion]}}</p>
        <pre>{{form.value | json}}</pre>

</mat-card>