0

我目前正在使用单选按钮和表单获得一些奇怪的功能。

基本上我有一个带有 4 个单选按钮的表单。现在：当我单击一个单选按钮时，它会永久启用。因此，我可以选择所有 4 个选项。单击该选项不会取消选择单选选项。

我希望它在选项之间切换，所以我一次只能选择一个选项。我错过了什么？

我的代码：

<form [formGroup]="answer" (submit)="saveAnswer()">
    <input formControlName="answer" id="option1" type="radio" />
    <input formControlName="answer2" id="option2" type="radio" />
    <input formControlName="answer3" id="option3" type="radio" />
    <input formControlName="answer4" id="option4" type="radio" />
    <button type="submit">Submit</button>
</form>

constructor(
 private movieService: MovieService,
 private formBuilder: FormBuilder
) {
 this.answer = this.formBuilder.group({
   'answer': '',
   'answer2': '',
   'answer3': '',
   'answer4': ''
 });
}
4

1 回答 1

1

如果您想要“分组”在一起的单选按钮（因此您只能选择其中一个），您应该为所有这些按钮提供相同的名称：

<form [formGroup]="answer" (submit)="saveAnswer()">
    <input formControlName="answer" value="answer1" id="option1" type="radio" />
    <input formControlName="answer" value="answer2" id="option2" type="radio" />
    <input formControlName="answer" value="answer3" id="option3" type="radio" />
    <input formControlName="answer" value="answer4" id="option4" type="radio" />
    <button type="submit">Submit</button>
</form>

您可以使用它们来区分它们value

于 2017-08-18T20:15:05.927 回答