Angular中传入子组件的嵌套FormGroup为何无法触发变更检测？

Angular的ngOnChanges钩子仅在输入属性的引用发生变更时触发，而非输入对象内部值变化时。你传入子组件的nestedGroup始终是同一个FormGroup实例，修改其内部field1的值并不会改变这个实例的引用，因此ngOnChanges不会被触发。这也是valueChanges能正常工作的原因——它监听的是FormGroup内部值的变化，和实例引用无关。

1. 利用FormGroup的valueChanges（推荐） #

既然已经能通过valueChanges捕获值变化，直接在订阅回调中处理子组件逻辑即可，无需依赖ngOnChanges：

// child.component.ts
ngOnInit() {
  this.inputGroup.valueChanges.subscribe((value) => {
    console.log('Form值已更新:', value);
    // 在这里执行原本计划在ngOnChanges中处理的逻辑
    this.processFormValue(value);
  });
}

private processFormValue(value: any) {
  // 编写表单值变化后的处理逻辑
}

2. 传递表单值而非FormGroup实例 #

如果一定要触发ngOnChanges，可以在父组件中传递嵌套表单的值而非FormGroup实例。当值变化时，父组件的getter会返回新的对象引用，从而触发子组件的ngOnChanges：

// parent.component.ts
get nestedGroupValue() {
  return this.form.get('nested')?.value;
}

// 父组件模板
<app-child [inputValue]="nestedGroupValue"></app-child>

// child.component.ts
@Input() inputValue: any;

ngOnChanges(changes: SimpleChanges) {
  if (changes['inputValue']) {
    console.log('Form值已更新:', changes['inputValue'].currentValue);
  }
}

3. 手动触发变更检测（不推荐） #

虽然你尝试过手动触发，但如果必须采用这种方式，可以在父组件修改值后，通过ChangeDetectorRef标记组件树需要变更检测。不过这属于hack手段，因为本质上输入属性的引用并未变化，不建议在生产环境使用：

// parent.component.ts
constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {}

changeValue(nestedForm: FormGroup) {
  nestedForm.controls['field1'].patchValue({ key: 'newTestString' });
  this.cdr.detectChanges();
}

• ngOnChanges仅对输入属性的引用变化做出响应，对象内部值的变更不会触发该钩子
• 对于FormGroup这类可变对象，优先使用其原生的valueChanges或statusChanges订阅来响应内部状态变化
• 不要为了触发ngOnChanges而刻意修改对象引用，这会带来不必要的性能损耗

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