Angular2输入框双向绑定：多零输入自动转为单个零的实现问题

刚好我之前也碰到过类似的需求，给你分享一个贴合需求的解决方案：

你的核心诉求是当用户在number类型输入框里输入多个连续的0（比如0000），切换到其他输入框时，自动把输入内容改成单个0。你原本用ngModelChange的方式会在用户每输入一个字符就触发，体验不太顺畅，更合适的是用blur事件（用户离开输入框时触发）来处理。

修正后的代码实现 #

模板部分

<input 
  [(ngModel)]="value" 
  type="number" 
  class="form-control" 
  id="valueId"
  (blur)="normalizeZeroInput()"
>

组件逻辑部分

normalizeZeroInput() {
  // 先把当前值转成字符串，处理空值情况
  const inputStr = this.value?.toString() || '';
  // 精准匹配全是0的输入（比如0、00、0000）
  if (/^0+$/.test(inputStr)) {
    // 直接赋值为数字0，确保输入框显示单个0
    this.value = 0;
  }
  // 要是输入的是00123这类带前导零的有效数字，number输入框会自动转成123，不用额外处理
}

为什么这么做？ #

1. 用blur事件更合理：只在用户完成输入、切换到下一个输入框时触发处理，不会在用户输入过程中频繁修改内容，体验更自然。
2. 正则精准匹配场景：/^0+$/只会匹配全是0的输入，不会干扰正常的带前导零数字输入（这类输入number框会自动格式化）。
3. 直接赋值数字0：既保证了ngModel绑定的是标准数字类型，也能让输入框自动显示为单个0。

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