Angular：使用ControlContainer监听FormGroup切换变化的方法

问题 #

我有一个包含父组件和子组件的Angular项目。父组件中存在一个FormArray，需要从中筛选出对应的FormGroup传递给子组件。现有代码如下：

父组件模板 #

<child-component [formGroup]="relevantForm"></child-component>

父组件TypeScript #

ngOnInit() {
  setRelevantForm(id){
    this.relevantForm = this.formArray.controls.find(fa => fa.value.id === id);
  }
}

子组件TypeScript #

constructor(private controlContainer: ControlContainer) {
  this.relevantForm = this.controlContainer.control;
}

项目中有删除当前relevantForm的按钮，删除后会重新调用setRelevantForm(id)设置新的FormGroup，但子组件无法感知该变化以更新视图。我知道可以通过@Input传递FormGroup，但想了解是否可以通过ControlContainer让子组件感知FormGroup实例的切换（而非控件值变化），请问正确的实现方式是什么？

解决方案 #

问题根源在于子组件仅在constructor初始化时获取一次ControlContainer.control，后续父组件切换FormGroup实例时，子组件不会主动重新获取最新的control实例，导致视图不更新。以下是两种基于ControlContainer的可行实现方式：

方式一：使用Getter动态获取最新Control #

将子组件中的relevantForm改为getter属性，每次视图访问时都会从ControlContainer获取最新的实例，确保变更检测时能拿到最新的FormGroup：

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

@Component({
  selector: 'child-component',
  template: `
    <div [formGroup]="relevantForm">
      <!-- 你的表单控件定义 -->
    </div>
  `
})
export class ChildComponent {
  constructor(private controlContainer: ControlContainer) {}

  get relevantForm(): FormGroup {
    return this.controlContainer.control as FormGroup;
  }
}

方式二：通过ngDoCheck检测Control变化 #

如果需要在FormGroup实例切换时执行额外逻辑，可以实现DoCheck钩子，在每次变更检测时检查Control是否更新：

import { Component, ControlContainer, DoCheck } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'child-component',
  template: `
    <div [formGroup]="relevantForm">
      <!-- 你的表单控件定义 -->
    </div>
  `
})
export class ChildComponent implements DoCheck {
  relevantForm: FormGroup;

  constructor(private controlContainer: ControlContainer) {
    this.relevantForm = this.controlContainer.control as FormGroup;
  }

  ngDoCheck(): void {
    const currentControl = this.controlContainer.control as FormGroup;
    if (currentControl !== this.relevantForm) {
      this.relevantForm = currentControl;
      // 这里可以添加FormGroup切换后的自定义逻辑
    }
  }
}

关键注意点 #

• 父组件模板需保持[formGroup]="relevantForm"的绑定，Angular的formGroup指令会自动更新子组件注入的ControlContainer实例。
• 子组件内部不要单独声明formGroup指令，否则会覆盖父组件传递的ControlContainer，导致无法获取正确的FormGroup。

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