Angular9通过ngModel限制输入最大值时输入框显示异常问题

这个异常是Angular ngModel的脏值检测逻辑和number类型输入框交互时的固有特性导致的：

• ngModel在更新视图前，会对比回调中赋值的新模型值和上一次已同步的模型值：如果两个值完全相等，Angular会判定「模型没有变化」，直接跳过DOM层面的输入框内容更新。
• 输入144这类不以27为前缀的超限值时，触发ngModelChange的前一刻，已同步的age值（比如空值、1、14这类输入过程中的合法值）和你赋值的27不相等，Angular会正常触发视图更新，把输入框显示内容改成27。
• 输入271、2700这类以27为前缀的超限值时，用户输入到"27"的那一刻，age=27已经被ngModel记录为已同步的合法模型值；后续用户继续追加输入变成超限值时，你在回调中再次给age赋值27，Angular检测到新值和已记录的旧模型值完全一致，就不会触发DOM更新，最终出现「模型值已经是27，但输入框还显示超限内容」的不同步问题。
• 注意：原生<input type="number">的max属性仅在表单原生校验、提交阶段生效，不会拦截用户的实时输入，无法靠这个属性解决实时限制的需求。

核心逻辑是绕开ngModel的相等值跳过更新逻辑，保证DOM和模型值同步，两种常用可靠实现如下：

方案1：借助变更检测时序强制触发更新 #

改动量最小，不需要操作DOM：当检测到输入值超限时，先把绑定值设为和阈值不等的临时值，等一轮变更检测完成后再赋值为阈值，强制Angular触发视图更新：

public onAgeChange(newAge: number) {
  if (newAge > 27) {
    this.age = null;
    // 下一个事件循环周期赋值，触发变更检测
    setTimeout(() => {
      this.age = 27;
    }, 0);
  } else {
    this.age = newAge;
  }
}

这个方案可以覆盖所有超限输入场景，不需要额外引入Angular的其他API。

方案2：手动同步原生输入框值 #

如果不想引入setTimeout的异步逻辑，可以通过模板引用获取输入框DOM实例，在更新模型值的同时直接修改原生输入框的value属性，绕开ngModel的脏值判断：
第一步，给模板中的输入框添加模板引用变量：

<input #ageInput type="number" max="27" [ngModel]="age" (ngModelChange)="onAgeChange($event)" />

第二步，在组件中获取DOM引用，更新值时同步修改原生输入框内容：

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

@Component({
  selector: 'my-app',
  template: `
   <h1>ngModel Example</h1>
   <label>Age </label>
   <input #ageInput type="number" max="27" [ngModel]="age" (ngModelChange)=onAgeChange($event) />
   <br>
   <br>
   <div>Age is set to {{age}}</div>
  `
})
class AppComponent {
  public age;
  @ViewChild('ageInput') ageInputRef: ElementRef<HTMLInputElement>;
  
  public onAgeChange(newAge: number) {
    const finalValue = newAge > 27 ? 27 : newAge;
    this.age = finalValue;
    // 手动同步原生输入框显示值
    if (this.ageInputRef) {
      this.ageInputRef.nativeElement.value = String(finalValue);
    }
  }
}

这个方案是同步更新，没有时序延迟。

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