Angular输入框限制2位小数时输入逗号出现NaN及数值截断问题咨询

你遇到的两个问题核心原因都是JavaScript默认不识别逗号作为小数点分隔符：

• 直接用+转换带逗号的字符串为数字时，会直接得到NaN，调用toFixed方法自然无法得到预期结果
• 输入超过两位小数触发正则校验不通过后，转数字得到NaN，赋值逻辑失效，最终输入框回退到之前的有效值（比如你输入1,111的时候就回退到了之前的1）

调整后的TS代码 #

@ViewChild('number') input;

limitNbOfDecimals() {
  // 替换输入值中的逗号为小数点，兼容逗号作为小数分隔符的场景
  const rawInput = this.input.nativeElement.value.replace(',', '.');
  // 校验规则：整数加最多两位小数，兼容点/逗号两种分隔符
  const decimalValid = /^\d+(?:[.,]\d{0,2})?$/.test(this.input.nativeElement.value);

  if (!decimalValid) {
    const parsedNum = parseFloat(rawInput);
    // 仅处理合法数值，避免非法输入清空内容
    if (!isNaN(parsedNum)) {
      // 保留两位小数，如需显示为逗号分隔就替换回逗号
      const formatted = parsedNum.toFixed(2).replace('.', ',');
      this.input.nativeElement.value = formatted;
      // 同步更新ngModel绑定的变量，避免数据和视图不一致
      this.form.number = formatted;
    }
  } else {
    // 合法输入直接同步绑定值
    this.form.number = this.input.nativeElement.value;
  }
}

HTML代码（无需修改，保持原有逻辑即可） #

<input class="form-control" type="text" [(ngModel)]="form.number"
  #number
  name="number"
  (input)="limitNbOfDecimals()"
/>

• 转换数字前统一把逗号替换为小数点，彻底解决带逗号输入转NaN的问题
• 新增NaN判断，避免非法输入导致内容被清空
• 赋值回输入框时按需替换回逗号，适配你的显示需求
• 同步更新ngModel绑定的form.number变量，避免数据源和视图显示不一致

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