PrimeNG InputNumber最大值异常：输入99,999,999,999,999.99自动变99,999,999,999,999.98

问题根源 #

这个问题是JavaScript Number类型的精度限制导致的：99,999,999,999,999.99的整数部分已超出Number能精确表示的范围（Number精确最大值为2^53，即9007199254740992），存储时会丢失精度，最终显示为99,999,999,999,999.98。

解决方法 #

方法1：启用字符串值存储（推荐，适用于PrimeNG 14+版本） #

使用InputNumber的useStringValue属性，让组件以字符串形式存储数值，避免Number精度丢失：

<p-inputNumber 
  [(ngModel)]="yourValue" 
  [max]="99999999999999.99" 
  useStringValue="true"
  locale="en-US"
  [decimalPlaces]="2"
></p-inputNumber>

方法2：自定义解析与格式化逻辑（兼容旧版本） #

通过formatter和parser函数手动处理数值的字符串格式，绕过Number精度限制：

1. 在组件类中定义格式化和解析函数：

// 格式化数值，添加千分位分隔符并保留两位小数
formatValue(value: string): string {
  if (!value) return '';
  const num = parseFloat(value.replace(/,/g, ''));
  return num.toLocaleString('en-US', { 
    minimumFractionDigits: 2, 
    maximumFractionDigits: 2 
  });
}

// 解析输入值，移除千分位分隔符返回纯数字字符串
parseValue(value: string): string {
  return value.replace(/,/g, '');
}

2. 在模板中绑定这两个函数：

<p-inputNumber 
  [(ngModel)]="yourValue" 
  [max]="99999999999999.99" 
  [formatter]="formatValue"
  [parser]="parseValue"
  locale="en-US"
  [decimalPlaces]="2"
></p-inputNumber>

方法3：添加自定义验证 #

额外添加验证逻辑，确保输入值不超过设定的最大值，防止精度丢失导致的自动截断：

import { Validators } from '@angular/forms';

// 在表单控件中添加自定义验证
this.yourForm = this.fb.group({
  amount: ['', [
    Validators.required,
    (control) => {
      const value = control.value?.replace(/,/g, '');
      if (parseFloat(value) > 99999999999999.99) {
        return { maxExceeded: true };
      }
      return null;
    }
  ]]
});

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