如何用ngDoCheck或valueChanges管控多组件表单变更？哪种更高效？

直接给结论：用ngDoCheck不是最优解，valueChanges + statusChanges才是更高效、更贴合Angular表单设计的方案。

为什么ngDoCheck不合适？ #

ngDoCheck是Angular变更检测周期的钩子，每次变更检测都会触发——不管你的表单值有没有变化，也不管是不是和表单相关的变更。对于有100+字段的表单来说，这意味着大量无意义的触发，如果你在里面做值对比、遍历控件这类操作，会显著增加性能开销，虽然能实现功能，但属于“用锤子拧螺丝”的思路。

为什么valueChanges更高效？ #

Angular的FormGroup/FormControl本身就提供了valueChanges可观察对象，它只在表单值实际发生变化时才触发，完全贴合你的“检测是否有值被修改”的需求：

• 如果你所有子组件的表单控件都归属同一个顶层FormGroup，只需要在顶层组件监听这个FormGroup的valueChanges即可，不用在每个子组件单独处理。
• 可以通过RxJS操作符优化触发频率：比如用distinctUntilChanged避免重复触发（比如控件值被设置为相同内容时），或者用debounceTime(300)减少连续输入时的触发次数，进一步降低性能消耗。
• 搭配statusChanges监听表单整体的VALID状态，这个可观察对象会在表单验证状态变化时触发，专门用来跟踪表单是否合法，比你自己在ngDoCheck里判断状态要精准。

简单实现示例 #

// 顶层组件中
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { distinctUntilChanged, debounceTime, skip } from 'rxjs/operators';

@Component({
  selector: 'app-root-form',
  templateUrl: './root-form.component.html'
})
export class RootFormComponent implements OnInit {
  mainForm: FormGroup;
  hasChanges = false;
  isFormValid = false;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化你的大表单，包含所有子组件对应的控件
    this.mainForm = this.fb.group({
      userInfo: this.fb.group({/* 子控件定义 */}),
      address: this.fb.group({/* 子控件定义 */}),
      // ... 其他100+字段对应的控件组/控件
    });

    // 监听值变化，标记是否有修改
    this.mainForm.valueChanges.pipe(
      skip(1), // 跳过初始值加载时的触发
      distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))
    ).subscribe(() => {
      this.hasChanges = true;
    });

    // 监听表单验证状态
    this.mainForm.statusChanges.subscribe(status => {
      this.isFormValid = status === 'VALID';
    });
  }
}

额外注意点 #

• 确保所有子组件的表单控件都是通过@Input接收顶层FormGroup的子控件/子组，而不是各自创建独立的表单控件，这样整个表单的状态和值变化才能被统一监听。
• 如果子组件有自定义表单控件，要确保正确实现ControlValueAccessor接口，让它能和Angular表单系统无缝集成，这样valueChanges和statusChanges才能捕获到它的变化。

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