Angular 11单选按钮默认值无法设置问题求助

以下是针对该问题的排查和解决步骤：

• 匹配value的类型与formControl值类型
  单选按钮的value必须和formControl设置的默认值类型完全一致。如果模板中写的是value="false"，此时value是字符串类型，和你设置的布尔值false不匹配，导致无法选中。必须使用属性绑定语法传入布尔值：

  <!-- 正确写法 -->
  <input type="radio" formControlName="isTaxPaid" [value]="true"> Yes
  <input type="radio" formControlName="isTaxPaid" [value]="false"> No
  

• 确认FormGroup初始化时机
  确保FormGroup在组件初始化阶段（比如ngOnInit）创建，避免模板先渲染后才设置表单值，导致单选按钮未同步状态：

  import { FormBuilder, FormGroup } from '@angular/forms';
  
  export class YourComponent {
    form: FormGroup;
  
    constructor(private fb: FormBuilder) {}
  
    ngOnInit(): void {
      // 在ngOnInit中初始化表单，设置默认值
      this.form = this.fb.group({
        isTaxPaid: [false]
      });
    }
  }
  

• 排查是否存在值被覆盖的情况
  检查组件代码中是否有其他逻辑（比如接口请求回调、用户操作触发的方法）修改了isTaxPaid的值。可以在ngOnInit之后添加打印语句确认实际值：

  ngOnInit(): void {
    this.form = this.fb.group({
      isTaxPaid: [false]
    });
    // 确认表单初始值
    console.log(this.form.get('isTaxPaid').value);
  }
  

• 验证表单绑定的正确性
  确保模板中的<form>标签正确绑定了对应的FormGroup，否则formControlName无法关联到表单控件：

  <form [formGroup]="form">
    <input type="radio" formControlName="isTaxPaid" [value]="true"> Yes
    <input type="radio" formControlName="isTaxPaid" [value]="false"> No
  </form>
  

• 检查表单模块是否导入
  确认组件所在的模块中已经导入ReactiveFormsModule，否则表单相关指令无法生效：

  import { NgModule } from '@angular/core';
  import { ReactiveFormsModule } from '@angular/forms';
  import { YourComponent } from './your.component';
  
  @NgModule({
    declarations: [YourComponent],
    imports: [ReactiveFormsModule]
  })
  export class YourModule {}
  

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