Angular AG-Grid货币格式化器存储值未同步格式化问题求助

现状说明 #

• 我的货币格式化代码如下：
  
• 当前格式化表现正常：
  • 输入纯数字（如123）或合法小数（如12345.45）时，可正确完成格式化；
  • 输入含字母、特殊字符（除小数点.外）的内容（如123/45）时，界面提示“Invalid Format”，列显示默认值0.00。

核心问题 #

界面显示已正确应用格式化规则，但提交到后端的仍是原始输入值（比如输入123/45，后端收到的还是123/45而非0.00），需要让存储值同步遵循格式化规则。

解决方案 #

问题根源是仅在渲染层处理了显示值，未同步更新数据源的原始值，解决步骤如下：

1. 封装校验与转换函数
   把合法性校验和值转换逻辑抽成独立函数，方便复用：

function processCurrencyValue(rawValue) {
  // 校验是否为合法货币格式（整数或最多两位小数）
  const validPattern = /^\d+(\.\d{1,2})?$/;
  if (validPattern.test(rawValue)) {
    // 合法则保留两位小数
    return parseFloat(rawValue).toFixed(2);
  } else {
    // 非法则返回默认值
    return '0.00';
  }
}

2. 在数据变更时同步更新数据源
   如果使用表格组件（如AG Grid、Element UI Table等），在单元格值变更的回调事件中，直接修改数据源对应的字段：

// 以AG Grid的onCellValueChanged为例
onCellValueChanged(params) {
  if (params.colDef.field === 'basePrice') {
    // 处理当前值并更新数据源
    params.data.basePrice = processCurrencyValue(params.newValue);
    // 触发表格刷新（按需调用）
    params.api.refreshCells({ rowNodes: [params.node], columns: [params.column] });
  }
}

3. 提交前统一处理数据
   在向后端发送请求前，对所有需要格式化的字段做一次统一处理：

// 假设待提交的行数据为rowData
const submitData = {
  ...rowData,
  basePrice: processCurrencyValue(rowData.basePrice),
  // 其他需要格式化的字段同理
  // otherPrice: processCurrencyValue(rowData.otherPrice)
};

// 发送请求到后端
fetch('/api/submit', {
  method: 'POST',
  body: JSON.stringify(submitData)
});

通过以上步骤，就能确保后端收到的是经过校验和格式化后的正确值，与界面显示保持一致。

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