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

问题描述

之前我使用表单验证一切正常，我的单选按钮组html看起来像这样:

<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}}</span>

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

<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}}</span>

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

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

ngOnInit(){this.gradingKeyForm = this.fb.group({bestGradeScores: bestGradeScoresFormControl,最差GradeScores:最差GradeScoresFormControl，scoreAtBend: [this.gradingKey.scoreAtBend],GradeAtBend: [this.gradingKey.gradeAtBend],halfScoresCount: [this.gradingKey.currentAnswer]});}

我没有改变我的模型对象: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 个问题！

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

有些人可能会说这是因为 *ngFor... 中有 2 个相同的 formControlName`s.

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

解决方案

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

我怀疑这是由于初始化

halfScoresCount: [this.graFodingKey.currentAnswer]

作为一个数组.应该是

halfScoresCount: this.graFodingKey.currentAnswer

其中 this.graFodingKey.currentAnswer 匹配 gradingKey.halfScoresCountAnswers[] 中的一个可能值(更明确地说，匹配迭代 answer 中的一个可能值code>s) 与您在响应式表单之前所做的完全一样(即，[(ngModel)]="gradingKey.currentAnswer" [value]="answer")

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>

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

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]
    });
}

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];
}

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

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

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

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

解决方案

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

I suspect this is due to initializing

halfScoresCount: [this.graFodingKey.currentAnswer]

as an array. It should probably be

halfScoresCount: this.graFodingKey.currentAnswer

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屋！