按形式分组的单选按钮 angular

Question

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

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

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

我的代码：

<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': ''
 });
}

Answer 1

如果您想要 "grouped" 在一起的单选按钮（这样您可以 select 只有一个），您应该给它们全部相同的名称：

<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

来区分它们

按形式分组的单选按钮 angular

Radio buttons grouped by a form angular

html

forms

angular

formgroups