Angular 11 中 Radio 按钮默认值失效该怎么解决

在 Angular 11 项目里，使用响应式表单或模板驱动表单渲染 radio 按钮组时，不少人都遇到过明明给控件设置了初始值，但页面上没有任何选项被选中。这个问题通常不是框架 bug，而是数据绑定方式或生命周期时机没有处理好。下面从原理和代码两个层面拆解原因并给出可行方案。

一、问题背后的常见原因

Radio 按钮在原生 HTML 中依靠 name 属性分组，并且只有当某个 input 的 value 与表单状态里保存的值严格相等时才会呈现选中状态。Angular 的 FormControl 在比对时使用的是 JavaScript 的严格相等（===），如果模板写的是 value="1"（字符串），而组件里给控件赋的是数字 1，比对就会失败。

另一个容易被忽略的点是变更检测的时机。若在 ngOnInit 里发起了 HTTP 请求，在回调中用 setValue 赋值，但此时若组件使用了 OnPush 策略且未手动触发检测，视图也不会更新。此外，模板驱动表单中如果把 [(ngModel)] 和 formControlName 同时写在一个 radio 上，会造成指令冲突，默认值同样可能失效。

二、响应式表单中的正确写法

使用 ReactiveFormsModule 时，应保证模板中 radio 的 [value] 绑定的是与组件数据中同类型的值。下面是一段推荐写法，注意 [value] 使用了属性绑定而非字符串字面量。

<form [formGroup]="userForm">
  <label>
    <input type="radio" formControlName="gender" [value]="1"> 男
  </label>
  <label>
    <input type="radio" formControlName="gender" [value]="2"> 女
  </label>
</form>

在组件类中，初始化 FormGroup 时直接给定默认值，或在异步获取后使用 patchValue。若使用 OnPush，需注入 ChangeDetectorRef 并调用 markForCheck。

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
  userForm: FormGroup;
  constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.userForm = this.fb.group({
      gender: [1] // 数字类型默认值
    });

    // 模拟异步赋值
    setTimeout(() => {
      this.userForm.patchValue({ gender: 2 });
      this.cdr.markForCheck();
    }, 1000);
  }
}

这种写法的好处是类型一致、状态由 FormControl 统一管理，不会出现视图与数据脱节。缺点是需要多写一些表单构建代码，但对中大型项目来说更可控。

三、模板驱动表单的注意事项

如果项目使用 [(ngModel)]，应确保不要混用 formControlName。下面示例展示单纯的模板驱动方式，初始值通过组件属性赋予。

<form>
  <label>
    <input type="radio" name="role" [(ngModel)]="role" [value]="admin"> 管理员
  </label>
  <label>
    <input type="radio" name="role" [(ngModel)]="role" [value]="user"> 普通用户
  </label>
</form>

组件中定义 role 属性并赋初始值即可。这里 [value]="admin" 绑定的是变量而非字符串，若写成 value="admin" 则类型是字符串，而变量可能是对象或数字，同样会导致不选中的情况。

export class RoleComponent {
  role: string = 'admin';
}

模板驱动方式代码量少，适合简单页面，但调试时不如响应式表单直观，且难以做跨字段校验。

四、调试与排查清单

遇到默认值失效，可按以下顺序自查：打开浏览器控制台打印 FormControl 的 value 与模板中 radio 的 value 做类型对比；确认没有在同一个 input 上同时使用 ngModel 和 formControlName；检查是否在异步回调中赋值且组件为 OnPush 却忘了触发检测。

还可以在模板中临时用 {{ userForm.get('gender')?.value }} 输出当前值，确认数据层没问题后再看视图层绑定。多数情况下，统一类型和规范绑定方式就能解决 Angular 11 中 radio 默认值失效的问题。

Angular_11radio_buttonform_control修改时间：2026-08-09 02:21:25