Angular响应式表单加载时默认勾选复选框的实现问题

你当前的代码同时混用了响应式表单的formControlName和模板驱动的ngModel，这会导致状态冲突——Angular中响应式表单的控件值优先级更高，所以直接设置isactivechk不会生效。以下是两种可行的解决方式：

方式1：独立初始化子组件表单 #

直接在子组件的响应式表单初始化阶段，给IsActive控件设置初始勾选状态：

修改后的子组件HTML #

<div>
    Is Active
</div>
<div class="form-group">
    <input type="checkbox" formControlName="IsActive">
</div>

修改后的子组件TS #

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

export class UserregistrationComponent implements OnInit {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单时将IsActive的默认值设为true，实现加载即勾选
    this.userForm = this.fb.group({
      IsActive: [true]
    });
  }
}

方式2：由父组件控制初始状态 #

如果需要父组件决定复选框的初始勾选状态，可以通过@Input()传递参数：

子组件TS（带Input参数） #

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

export class UserregistrationComponent implements OnInit {
  // 接收父组件传递的初始状态，默认值设为true
  @Input() initialIsActive: boolean = true;
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.userForm = this.fb.group({
      IsActive: [this.initialIsActive]
    });
  }
}

父组件使用子组件时的代码 #

<app-user-registration [initialIsActive]="true"></app-user-registration>

核心逻辑是：响应式表单的控件状态应该由FormGroup/FormControl管理，避免混合两种表单模式，这样既能保证状态同步，也符合Angular的最佳实践。

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