Angular动态格式化数字输入格式异常，请求问题排查

问题描述 #

输入字段代码：

<input type="text" [(ngModel)]="currentValue" (keyup)="onInput($event)" (change)="onFieldLeave(currentValue)"/>

期望格式：15 354.58（千位空格分隔，小数点保留两位）

当前实现的keyup事件处理函数：

public allowedChars: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.'];    
onInput(event: any) {
        if(event.key === ',') {
          this.currentValue = this.currentValue.toString().replace(',', '.');
        } else if (!this.allowedChars.includes(event.key)) {
          this.currentValue = this.currentValue.toString().replace(event.key, '');
        } else {
          this.currentValue = this.decimalPipe.transform(this.currentValue, '1.0-2', 'fr-FR').replace(',', '.');
        }
      }

实际格式化结果：1 5354.58，不符合预期。

问题原因 #

1. 重复格式化逻辑错误：keyup事件中直接用带格式的currentValue（比如带空格的字符串）重复调用decimalPipe，导致管道解析混乱。例如输入15354时第一次转成15 354，后续输入时，管道会把带空格的字符串当成非纯数字处理，错误拆分成1 5354。
2. 输入过滤不全：allowedChars未包含0，用户无法输入0；同时用replace(event.key, '')处理非法字符存在漏洞，若非法字符重复出现会被全部替换，且未考虑退格、删除等功能键的处理。
3. 类型混淆：currentValue是绑定的字符串，但decimalPipe需要纯数字输入，带空格的字符串会导致解析异常。

解决方案 #

核心思路：分离原始数字存储与格式化显示 #

维护一个纯数字变量保存用户输入的原始值，仅在显示时进行格式化，避免用带格式的字符串重复做数字转换。

修正后的代码实现 #

import { DecimalPipe } from '@angular/common';

// 内部存储纯数字，避免格式化字符串干扰计算
private rawValue: number = 0;
// 补充0的输入权限
public allowedChars: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'];    

constructor(private decimalPipe: DecimalPipe) {}

onInput(event: any) {
  const inputKey = event.key;

  // 处理逗号转小数点
  if (inputKey === ',') {
    this.rawValue = this.parseValidNumber(this.currentValue.replace(',', '.'));
  }
  // 处理合法输入字符
  else if (this.allowedChars.includes(inputKey)) {
    // 先清除当前显示字符串的格式，拼接新输入字符后转成合法数字
    const cleanStr = this.currentValue.replace(/\s/g, '') + inputKey;
    this.rawValue = this.parseValidNumber(cleanStr);
  }
  // 处理功能键（退格、删除等）
  else if (['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(inputKey)) {
    if (inputKey === 'Backspace') {
      const cleanStr = this.currentValue.replace(/\s/g, '').slice(0, -1);
      this.rawValue = this.parseValidNumber(cleanStr);
    }
    return;
  }
  // 拦截其他非法字符
  else {
    event.preventDefault();
    return;
  }

  // 格式化原始数字为目标显示格式
  this.currentValue = this.decimalPipe.transform(this.rawValue, '1.0-2', 'fr-FR')?.replace(',', '.') || '0';
}

// 辅助函数：将字符串解析为合法的两位小数数字
private parseValidNumber(str: string): number {
  // 清除所有非数字、非小数点的字符
  const cleaned = str.replace(/[^0-9.]/g, '');
  // 限制最多一个小数点，且小数位不超过两位
  const parts = cleaned.split('.');
  let numStr = parts[0];
  if (parts.length > 1) {
    numStr += `.${parts[1].slice(0, 2)}`;
  }
  return parseFloat(numStr) || 0;
}

// 离开字段时再次校准格式
onFieldLeave(value: string) {
  this.rawValue = this.parseValidNumber(value);
  this.currentValue = this.decimalPipe.transform(this.rawValue, '1.0-2', 'fr-FR')?.replace(',', '.') || '0';
}

关键说明 #

• 用rawValue存储纯数字，彻底避免格式化字符串对数字解析的干扰，这是解决千位分隔错误的核心。
• 完善输入过滤逻辑，覆盖0的输入、功能键处理，避免非法输入破坏格式。
• 统一数字解析规则，确保所有输入最终都转换为合法的两位小数数字，再进行格式化显示。

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