Angular 14出现ExpressionChangedAfterItHasBeenCheckedError，V11正常

问题根源 #

Angular 12+版本对变更检测机制做了严格强化，你的场景刚好踩了规则：父组件先创建FormGroup并传给子组件，父组件模板里绑定了formGroup.valid。在变更检测流程中，父组件的模板检查先于子组件的ngOnInit执行，等父组件检查完formGroup.valid的状态后，子组件在ngOnInit里添加带必填验证的FormControl，直接修改了父组件表单的有效性状态，这就触发了Angular的错误——它不允许一次变更检测周期内，已校验过的绑定值发生变化。

几种靠谱的解决办法 #

1. 把添加控件的逻辑移到ngAfterViewInit #

这个钩子在父组件视图初始化完成后才执行，此时父组件的第一次变更检测已经结束。记得用ChangeDetectorRef手动触发一次变更检测，让父组件感知到表单状态的变化：

import { Component, Input, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-child',
  template: '<input [formControl]="formGroup.get(\'newControl\')">'
})
export class ChildComponent implements AfterViewInit {
  @Input() formGroup!: FormGroup;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit(): void {
    this.formGroup.addControl('newControl', new FormControl('', Validators.required));
    this.cdr.detectChanges();
  }
}

2. 用setTimeout延迟修改表单 #

把添加控件的逻辑放到setTimeout里，让它进入下一个JavaScript执行队列，避开当前的变更检测周期：

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

@Component({
  selector: 'app-child',
  template: '<input [formControl]="formGroup.get(\'newControl\')">'
})
export class ChildComponent implements OnInit {
  @Input() formGroup!: FormGroup;

  ngOnInit(): void {
    setTimeout(() => {
      this.formGroup.addControl('newControl', new FormControl('', Validators.required));
    }, 0);
  }
}

3. 父组件提前定义所有需要的控件 #

如果业务逻辑允许，直接在父组件创建FormGroup时就把子组件需要的控件加上，彻底避免子组件修改父组件的表单结构：

// 父组件代码示例
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-parent',
  template: '<app-child [formGroup]="parentForm"></app-child>'
})
export class ParentComponent {
  parentForm = new FormGroup({
    existingControl: new FormControl(''),
    newControl: new FormControl('', Validators.required) // 提前定义子组件要用的控件
  });
}

4. 临时关闭开发模式的严格检查（不推荐） #

如果只是临时调试需要，可以关闭开发模式下的变更检测严格检查，但线上绝对不能这么做——这会掩盖潜在的视图不一致问题：

// main.ts 中修改启动配置
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { COMPILER_OPTIONS } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    // 关闭严格的变更检测校验
    { provide: COMPILER_OPTIONS, useValue: { strictTemplates: false }, multi: true }
  ]
});

注意：这个方法只适合临时排查问题，长期使用会埋下隐患。

总结 #

Angular高版本强化变更检测严格性，是为了避免视图和数据不一致的隐性问题。核心要遵守的规则是：在当前变更检测周期内，不要修改已经被检查过的绑定值。

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