Angular 10单选按钮默认未选中：如何默认选中Female选项？

我们有一个单选按钮组，期望默认选中Female单选选项，但当前代码无法正常生效，使用的代码如下：

<ng-template #genderTemplate>
      <div>
        <div>
          <label class="ari-label" for="gender">Gender</label>
        </div>
        <label class="ari-control ari-control-radio ari-control-inline">
          <input formControlName="gender" type="radio" [value]="true" /> Male
          <div class="ari-control-indicator"></div>
        </label>
        <label class="ari-control ari-control-radio ari-control-inline">
          <input formControlName="gender" type="radio" [value]="false" [checked]="!gender"/> Female
          <div class="ari-control-indicator"></div>
        </label>
      </div>
    </ng-template>

解决思路 #

• 禁止混用[checked]与响应式表单控件
  Angular响应式表单中，单选按钮的选中状态完全由FormControl的值控制，手动添加[checked]属性会和表单控件的内部状态冲突，直接移除Female单选框上的[checked]="!gender"。

• 初始化FormControl的默认值
  Female对应的[value]是false，只需在组件类的表单初始化代码中，将gender控件的默认值设为false即可：

  import { FormGroup, FormControl } from '@angular/forms';
  
  // 组件类内的表单定义
  yourForm = new FormGroup({
    gender: new FormControl(false)
  });
  

• 校验表单绑定的一致性
  确认模板中的formControlName="gender"和组件类中FormGroup内的控件名称完全匹配，避免拼写错误导致绑定失效。

• 排查是否存在值覆盖逻辑
  检查组件初始化后是否有patchValue、setValue或表单重置的代码，这些操作会覆盖默认值，导致默认选中不生效。

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