如何在角度 6 中使用 formArray 制作动态问答表单

Question

我正在尝试制作一个包含问题和一些选项作为答案的表格。添加选项是动态的，所以我尝试使用 formArray 实现它。 但与此同时，我需要保存哪个选项是正确的，因此，我在每个选项中使用单选按钮。

问题是当我更改单选按钮时，它不会取消选中以前的按钮。

.HTML：

<form [formGroup]="questionForm">
<button type="button" class="iconBtn" title="Add Options" (click)="addOptions()">
Add Option
</button>
<div formArrayName="options">
<div *ngFor="let option of questionForm.controls['options'].controls; let i = index">
<div class="row" [formGroupName]='i'>
<div class="col-xs-1 text-right">
<span class="radio">
<label class="radio-inline" title="Select if this is correct answer">
<input type="radio" [formControlName]="'isCorrect'" value="1" (change)="selectCorrectOption($event)"/>
</label>
</span>
</div>
<div class="col-xs-11">
<input type="text" class="form-control" placeholder="Option Text" [formControlName]="'optionText'"/>
</div>
</div>
</div>
</div>
</form>

TypeScript (ts(：

ngOnInit() {
this.questionForm = this._fb.group({
'options': this._fb.array([
this._fb.group({
'isCorrect': [0],
'optionText': ['']
})
])
});
}
public addOptions() {
let control = < FormArray > this.questionForm.controls.options;
control.push(this._fb.group({
'isCorrect': [0],
'optionText': ['']
})
);
}

任何解决方案将不胜感激。

Answer 1

您必须在<input type="radio">中添加名称属性

Answer 2

您必须更改模板代码，以便为每个单选按钮使用相同的formControlName，例如：

<input type="radio" formControlName="isCorrect" value="1" />
<input type="radio" formControlName="isCorrect" value="0" />
<input type="radio" formControlName="isCorrect" value="0" />

并通过以下方式访问值

questionForm.value.isCorrect

我发现将 name 属性添加到单选按钮标签足以满足仅选择一个按钮的需求。

<input type="radio" name="isCorrect" formControlName="isCorrect" (change)="selectCorrectOption($event)"/>