在 ngFor 中有一个 mat-radio-button 与 Reactive Forms 一起工作

Question

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

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

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 会导致以下错误。

ERROR Error: No value accessor for form control with name: 'func'

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

Form control directives use a ControlValueAccessor directive to communicate with the native element. There are different types of ControlValueAccessors for each of the possible inputs. The correct one is chosen by the selector of the value accessor directive. The selectors are based on what type the <input> is. When you have type="radio", then the value accessor for radios will be used.

这个答案的解释

在这种情况下，使用方法在控件上设置值是正确的方法...如果您不想使用方法在 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>

在 ngFor 中有一个 mat-radio-button 与 Reactive Forms 一起工作

Have a mat-radio-button in a ngFor work with Reactive Forms

ngfor

angular-material2

angular

angular-reactive-forms