Angular使用ngModelChange过滤输入后input视图未同步更新问题

根因 #

这是Angular ngModel的变更检测优化机制导致的：当输入包含字母的内容时，changeQuantity过滤后返回的数字如果和当前quantity的值完全相等，Angular会判定绑定值未发生变更，不会主动更新输入框视图，因此输入框会残留输入的字母，但插值表达式{{quantity}}不受该优化影响，可正常展示最新值。同时如果输入内容全为字母，parseInt处理空字符串会得到NaN，也会触发更新异常。

可行解决方案 #

方案1：最小改动，直接同步输入框视图（推荐） #

无需修改TS代码，仅在模板中通过模板引用变量强制同步输入框的值即可：

<input
  #quantityInput
  [ngModel]="quantity"
  (ngModelChange)="quantity = changeQuantity($event); quantityInput.value = quantity"
/>
<p> {{quantity}} </p>

方案2：优化TS处理逻辑，兼容边界情况 #

完善changeQuantity的异常处理，避免出现NaN导致更新失败：

public changeQuantity(cant: string) {
  const filtered = cant.replace(/[^0-9]+/g, '');
  // 处理全字母输入的空值场景
  return filtered ? parseInt(filtered, 10) : 0;
}

方案3：改用响应式表单实现（符合Angular最佳实践） #

如果项目有大量类似的表单校验需求，推荐用响应式表单实现，更易维护：

1. 先在对应模块导入ReactiveFormsModule
2. 修改TS代码：

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

@Component({
  selector: 'button-add-button',
  templateUrl: './button-add.component.html',
  styleUrls: ['./button-add.component.scss'],
})
export class ButtonAddComponent implements OnInit {
  quantityControl = new FormControl(10);
  
  ngOnInit() {
    this.quantityControl.valueChanges.subscribe(val => {
      const filtered = val.toString().replace(/[^0-9]+/g, '');
      const num = filtered ? parseInt(filtered, 10) : 0;
      if (num !== this.quantityControl.value) {
        // 关闭事件emit避免死循环
        this.quantityControl.setValue(num, { emitEvent: false });
      }
    })
  }
}

3. 修改模板代码：

<input [formControl]="quantityControl" />
<p> {{quantityControl.value}} </p>

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