![单选]( "单选")
本文介绍了如何在单选按钮组的 *ngFor 中最初设置选定的单选按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
之前我使用表单验证一切正常，我的单选按钮组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 中最初设置选定的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！