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)"/>

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

2 个答案: