Angular模板驱动表单触发ExpressionChangedAfterItHasBeenCheckedError错误排查

我编写了一个简单的Angular组件，代码如下：

import { Component } from '@angular/core';

@Component({
  selector: 'test-view',
  template: `
    <div [ngStyle]="{ 'background-color': m.invalid ? 'red' : 'green'}">{{m.status}}</div>
    <input #m="ngModel" type="text" [ngModel]="val" required/>
  `
})
export class TestViewComponent {
  val = 'test';
}

该示例与Angular官方模板驱动表单文档示例非常相似。在Angular 14.2调试模式下运行时，出现错误：

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'green'. Current value: 'red'. Find more at https://angular.io/errors/NG0100

若移除input的required属性，或调换div与input标签的顺序，该异常就会消失。请问我哪里操作有误？

原因分析与解决方案 #

核心原因 #

Angular调试模式下会执行两次变更检测，确保组件数据在检测周期内保持稳定。你的问题出在模板元素的渲染顺序和指令初始化的时序冲突：

1. 第一次变更检测时，先处理div的绑定逻辑，此时input的ngModel指令还未完成初始化和验证流程，模板变量m的invalid状态为初始的false，因此div背景色被设为green。
2. 随后Angular渲染input并完成ngModel指令的初始化，包括执行required验证（初始化过程中状态会发生更新），此时m.invalid变为true，div背景色应变为red。
3. 第二次变更检测时，Angular发现div的背景色值在两次检测间发生了变化，违反了调试模式下的稳定规则，因此抛出NG0100错误。

移除required属性后，没有验证规则触发状态变更，两次检测值一致，错误自然消失；调换div和input顺序后，ngModel先完成初始化，div绑定的是最终稳定的状态，两次检测结果一致，也不会报错。

解决方案 #

最直接且符合Angular渲染逻辑的方案是调整模板元素顺序，把input放在div前面：

@Component({
  selector: 'test-view',
  template: `
    <input #m="ngModel" type="text" [ngModel]="val" required/>
    <div [ngStyle]="{ 'background-color': m.invalid ? 'red' : 'green'}">{{m.status}}</div>
  `
})

如果因布局需求无法调整顺序，也可以通过ChangeDetectorRef手动触发变更检测：

1. 注入ChangeDetectorRef：

import { Component, ChangeDetectorRef } from '@angular/core';

export class TestViewComponent {
  val = 'test';
  constructor(private cdr: ChangeDetectorRef) {}
}

2. 在组件初始化后手动标记变更检测：

ngAfterViewInit() {
  this.cdr.detectChanges();
}

不过这种方式属于临时 workaround，优先推荐调整元素顺序的方案。

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