最初如何在单选按钮组的* ngFor中设置选定的单选按钮 [英] How to set the selected radio button initially in *ngFor on radiobutton group

问题描述

之前，我使用表单验证可以正常工作，并且单选按钮组html如下所示:

Before I used forms validation everything worked and my radio button group html looked like this:

<div class="form-group row">
                <label class="col-xs-6 col-form-label">{{getHalfScoresErrorsCount()}}</label>
                <div class="col-xs-6">
                    <span *ngFor="let answer of gradingKey.halfScoresCountAnswers">
                        <label class="form-check-inline">
                            <input class="form-check-input" type="radio" (ngModelChange)="onChangeHalfScoresErrorsCount($event)"
                            [(ngModel)]="gradingKey.currentAnswer" [value]="answer">
                            {{answer.value}}
                        </label>
                    </span>
                </div>
            </div>

实施响应式表单后，它看起来像这样:

After implementing reactive forms it looked like this:

<div class="form-group row">
    <label class="col-xs-6 col-form-label">{{getHalfScoresErrorsCount()}}</label>
    <div class="col-xs-6">
        <span *ngFor="let answer of gradingKey.halfScoresCountAnswers">
            <label class="form-check-inline">
                <input class="form-check-input" type="radio" (ngModelChange)="onChangeHalfScoresErrorsCount($event)"
                formControlName="halfScoresCount" [value]="answer">
                {{answer.value}}
            </label>
        </span>
    </div>
</div>

我添加了 formControlName 属性，并删除了 ngModel 指令...

I added the formControlName attribute and removed the ngModel directive...

然后我更改了代码: GradingKeyComponent.ts :

Then I changed the code: GradingKeyComponent.ts:

ngOnInit()
{
 this.gradingKeyForm = this.fb.group({
      bestGradeScores: bestGradeScoresFormControl,
      worstGradeScores: worstGradeScoresFormControl,
      scoreAtBend: [this.gradingKey.scoreAtBend],
      gradeAtBend: [this.gradingKey.gradeAtBend],
      halfScoresCount: [this.gradingKey.currentAnswer]
    });
}

我没有更改我的Model对象: GradingKey.ts

I did NOT change my Model object: GradingKey.ts

constructor(obj: any)
{
    this.halfScoresCountAnswers = [new KeyValue(true, 'Yes'), new KeyValue(false, 'No')];
    this.currentAnswer = obj.halfScoresCount == true ? this.halfScoresCountAnswers[0] : this.halfScoresCountAnswers[1];
}

我不希望仅因为我现在需要验证而更改我的html ... 2个问题！

I would prefer not to change my html just because I need validation now... 2 concerns!

目前，没有任何单选按钮值设置为true/selected.

At the moment no radio buttons value is set as true/selected.

有人可能说这是由于* ngFor ...中有2个相等的formControlName`s

Some might say this is due to having 2 equal formControlName`s in the *ngFor...

在不更改html的情况下，我应该如何正确解决该问题?

How should I solve that correctly if possible without changing my html?

推荐答案

一旦设置了相关的FormControl(在本例中为halfScoresCount)[value]，则应自动选择与answer相匹配的相关单选选项.

Once your relevant FormControl's (in this case, halfScoresCount) [value] is set, the relevant radio option whose answer matches should be automatically selected.

我怀疑这是由于初始化

halfScoresCount: [this.graFodingKey.currentAnswer]

作为数组.可能应该是

halfScoresCount: this.graFodingKey.currentAnswer

其中，this.graFodingKey.currentAnswer与gradingKey.halfScoresCountAnswers[]中的可能值匹配(更明确地，与迭代的answer的可能值匹配)，与在反应式(即[(ngModel)]="gradingKey.currentAnswer" [value]="answer")之前完全一样

where this.graFodingKey.currentAnswer matches a possible value in gradingKey.halfScoresCountAnswers[] (more explicitly, matches a possible value for the iterated answers) exactly as you did before reactive forms (i.e., [(ngModel)]="gradingKey.currentAnswer" [value]="answer")

这篇关于最初如何在单选按钮组的* ngFor中设置选定的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！