Angular 2+中如何确保同一FormGroup下的单选按钮默认未选中？

要让同一FormGroup下的单选按钮默认处于未选中状态，核心逻辑很简单：让绑定的FormControl初始值不匹配任何一个单选按钮的value值。结合你用FormArray管理多问题的场景，具体操作如下：

1. 在构建表单时设置初始值为null #

在你的组件类（component.ts）里，当创建FormArray中的每个FormGroup时，给对应单选按钮的FormControl设置初始值为null，而不是默认的某个选项值。

假设你的问题数据Ques是从API获取的，每个问题包含选项列表，示例代码如下：

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

// 组件类内的表单初始化逻辑
constructor(private fb: FormBuilder) {}

ngOnInit(): void {
  // 假设Ques是已从API获取的问题数组
  this.myForm = this.fb.group({
    questions: this.fb.array(
      this.Ques.map(question => 
        this.fb.group({
          questionId: question.id,
          answer: [null] // 关键：将单选控件的初始值设为null
        })
      )
    )
  });
}

2. 模板中正确绑定单选按钮 #

在component.html里，确保单选按钮的formControlName对应到你设置的控件名（比如上面的answer），并且[value]绑定到选项的实际值，不要手动添加checked属性（Angular会根据FormControl的值自动控制选中状态）。

示例模板代码：

<div [formGroup]="myForm">
  <div formArrayName="questions">
    <div *ngFor="let question of Ques; let i=index" [formGroupName]="i">
      <h4>Question #{{i + 1}}</h4>
      <div style="margin-left: 1em;">
        <div class="form-group" *ngFor="let option of question.options">
          <label>
            <input type="radio" formControlName="answer" [value]="option.value">
            {{option.label}}
          </label>
        </div>
      </div>
    </div>
  </div>
</div>

常见注意事项 #

• 不要手动设置checked属性：这会干扰Angular表单的状态管理，完全由FormControl的值来控制选中状态即可。
• 匹配值类型：如果你的选项值是数字类型，确保初始值null不会和任何选项值意外匹配（比如不要设为0，避免刚好和某个选项值一致）。
• 若使用ngModel绑定：如果是模板驱动表单，同样把ngModel绑定的变量初始值设为null即可。

内容的提问来源于stack exchange，提问作者sanmatrix