如何使用 Angular 6 中的 formArray 制作动态问答表格答案

【问题标题】：How to make a dynamic question answer form using formArray in angular 6如何使用 Angular 6 中的 formArray 制作动态问答表格
【发布时间】：2019-08-12 17:09:07
【问题描述】：

我正在尝试制作一个包含问题和一些选项作为答案的表单。添加选项是动态的，所以我尝试使用 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': ['']
      })
   );
}

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

【问题讨论】：

标签： angular formarray

【解决方案1】：

你必须在<input type="radio">中添加name属性

【讨论】：

【解决方案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)"/>

【讨论】：