NgModel绑定文本输入框条件更新仅首次生效后续不更新如何解决

这个问题本质是Angular变更检测和ngModel事件触发顺序的冲突导致的：

• [(ngModel)]双向绑定的更新逻辑是：先更新组件类中的绑定变量，再触发ngModelChange事件回调
• 变更检测在同一个事件周期内，只会对比当前周期结束后变量的最终值和上一个周期结束后的存储值，判断是否需要更新视图
• 首次操作时，输入大于10的数值后，someVal先被更新为输入值（比如11），触发ngModelChange后被改为0，最终值0和上一周期的存储值10不一致，所以视图正常更新
• 后续操作时，上一周期结束后的someVal存储值已经是0，再次输入大于10的数值后，someVal先被改成输入值，回调里又被改回0，最终值和上一周期的存储值0完全一致，Angular判定变量没有发生变更，就不会更新输入框视图，导致输入的大于10的数值残留在视图上。

方案1：将赋值操作放到下一个事件周期执行 #

用setTimeout把修改someVal的逻辑放到宏任务队列，避开当前变更检测周期的脏值对比，让Angular单独检测这次赋值变更，改动量最小，适合快速修复：

onChange(val: number):void {
  if(val > 10){
    setTimeout(() => {
      this.someVal = 0;
    }, 0)
  }
}

方案2：拆分双向绑定为手动控制的单向绑定+事件监听 #

放弃[(ngModel)]的双向绑定语法，改为自己控制值的更新逻辑，从根源避免自动更新带来的冲突，逻辑最可控，适合复杂校验场景：
模板部分修改为：

<mat-form-field>
    <mat-label>val:</mat-label>
    <input matInput [ngModel]="someVal" (input)="onChange($event.target.valueAsNumber)">
</mat-form-field>

组件逻辑调整为：

someVal: number = 10;
onChange(val: number):void {
  if(val > 10){
    this.someVal = 0;
    return;
  }
  // 符合条件的值手动赋值
  this.someVal = val;
}

方案3：手动触发变更检测 #

注入ChangeDetectorRef，修改值后强制触发一次变更检测：

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

// 省略组件装饰器代码
export class DemoComponent {
  someVal: number = 10;
  constructor(private cdr: ChangeDetectorRef) {}

  onChange(val: number):void {
    if(val > 10){
      this.someVal = 0;
      this.cdr.detectChanges();
    }
  }
}

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