Angular如何控制作为子FormGroup的子组件表单的禁用启用状态

问题核心原因 #

你当前的子组件RowComponent在ngOnInit生命周期中直接重写了父组件传入的@Input() rowForm，导致父组件主表单中嵌套的rowForm和子组件实际使用的表单不是同一个引用，父组件调用enable()/disable()方法自然无法作用到子组件的表单控件上。

具体修改方案 #

1. 修改主组件register-form的TS代码 #

调整主表单中rowForm的初始化逻辑，无需预先定义子表单内部字段，同时初始化时统一设置禁用状态：

constructor(private formBuilder: FormBuilder) {
  this.registerForm = this.formBuilder.group({
    username: [{value: '', disabled: this.disableForm}],
    email: [{value: '', disabled: this.disableForm}],
    password: [{value: '', disabled: this.disableForm}],
    confirmpassword: [{value: '', disabled: this.disableForm}],
    checkbox1: [{value: '', disabled: this.disableForm}],
    // 仅初始化空FormGroup，内部结构由子组件维护
    rowForm: this.formBuilder.group({})
  });
  // 初始统一禁用整个表单，确保嵌套子表单同步禁用
  if(this.disableForm) {
    this.registerForm.disable();
  }
  this.isEditable = !this.disableForm;
}

主组件的enableEdit和onSubmit方法不需要修改，调用registerForm.enable()/registerForm.disable()会自动作用于所有嵌套的子表单控件。

2. 修改子组件row的TS代码 #

不要覆盖传入的rowForm，改为在原有表单基础上添加内部rows FormArray，同时新增行时适配当前禁用状态：

ngOnInit() {
  // 不重写传入的rowForm，直接添加内部的rows FormArray控件
  this.rowForm.addControl('rows', this.formBuilder.array([this.createRow()]));
  // 初始同步禁用状态
  if(this.rowForm.disabled) {
    this.rowForm.get('rows').disable();
  }
}

createRow(): FormGroup {
  // 新增行时继承当前表单的禁用状态
  const isDisabled = this.rowForm.disabled;
  return this.formBuilder.group({
    input1: [{value: '', disabled: isDisabled}, Validators.required],
    input2: [{value: '', disabled: isDisabled}, Validators.required],
    input3: [{value: '', disabled: isDisabled}, Validators.required],
    checkbox2: [{value: '', disabled: isDisabled}, Validators.required],
  });
}

可选修复 #

你当前子组件模板中toggleInput调用没有传index参数，和方法定义不匹配，可以调整方法定义去掉多余参数：

toggleInput() {
  this.showInput = !this.showInput;
}

修改后即可实现整个表单默认禁用，点击编辑按钮全表单启用的需求，新增的子表单行也会自动适配当前编辑状态。

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