Angular 11数字输入框双向绑定退格键产生异常值问题咨询

出现退格显示异常值的核心是两点逻辑缺陷：

• 你拆分了ngModel的双向绑定逻辑，没有处理type="number"输入框的原生边界行为：当输入框内容被退格键完全清空时，输入框返回的$event值为null，Number(null)会得到0，和原有数量做运算时会触发非预期赋值。
• 原有计算逻辑没有做类型校验：quantity初始为数字类型，和输入框返回的空值、字符串类型值做加法运算时，会触发JS隐式类型转换，出现类似字符串拼接的垃圾值。

方案1：标准双向绑定+边界校验（推荐） #

不要拆分ngModel手动做值计算，用Angular标准的双向绑定语法，单独处理加减按钮和输入校验逻辑：

html文件修改 #

<button class="btn btn-outline-primary btn-lg" (click)="changeQuantity(product,1)">
<i class="fa-solid fa-plus"></i></button>
<input type="number" [(ngModel)]="product.quantity" id="prod-qty" (ngModelChange)="validateQuantity(product)">
<button class="btn btn-outline-primary btn-lg" (click)="changeQuantity(product,-1)">
<i class="fa-solid fa-minus"></i></button>

ts文件修改 #

// 加减按钮专用逻辑
changeQuantity(pr: any, step: number) {
  const current = isNaN(Number(pr.quantity)) ? 0 : Number(pr.quantity);
  // 这里设置数量最小值为1，可根据业务需求调整
  pr.quantity = Math.max(1, current + step);
}

// 手动输入后的校验逻辑
validateQuantity(pr: any) {
  // 空值、非合法数字时兜底为最小数量
  if (pr.quantity === null || pr.quantity === '' || isNaN(Number(pr.quantity))) {
    pr.quantity = 1;
    return;
  }
  pr.quantity = Number(pr.quantity);
}

方案2：最小改动修复原有逻辑 #

如果不想调整现有代码结构，只需要修正原有方法的边界判断，处理空值场景即可：

addProductToCart(pr: any, q: any){
  // 输入框为空/退格到空时直接中断计算，避免异常类型转换
  if (q === null || q === '') {
    return;
  }
  const current = Number(pr.quantity);
  const changeVal = Number(q);
  pr.quantity = isNaN(current + changeVal) ? 1 : Math.max(1, current + changeVal);
}

注意：type="number"输入框在内容完全清空时返回null是浏览器原生行为，所有绑定逻辑都必须单独处理这个边界，否则必然出现类型转换导致的异常显示问题。

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