ngx-mask如何支持逗号/点作为小数标记，显示时保留点作为分隔符

问题原因 #

ngx-mask自定义pattern中的symbol属性仅用于占位符显示，不会自动替换用户输入的字符，因此你输入逗号后不会被自动替换为点，属于框架本身的逻辑限制，并非配置错误。

ngx-mask 可行实现方案 #

通过组合配置项 + 输入事件处理即可实现需求：

1. 组件内定义配置：

customPatterns = {
  0: { pattern: new RegExp('\\d') },
  // 匹配逗号或点作为小数分隔符输入入口
  decimal: { pattern: new RegExp('[,.]') }
};
thousandSeparator = ' ';
mask = '0*decimal00';
// 存储用户原始输入的实际值
actualInputValue: string = '';

2. 模板中绑定配置和事件：

<input
  [mask]="mask"
  [patterns]="customPatterns"
  [thousandSeparator]="thousandSeparator"
  [dropSpecialCharacters]="false"
  (input)="handleInput($event)"
>

3. 输入事件处理逻辑：

handleInput(event: Event): void {
  const inputEl = event.target as HTMLInputElement;
  const rawInput = inputEl.value;
  // 替换显示层的逗号为点
  const displayVal = rawInput.replace(',', '.');
  inputEl.value = displayVal;
  // 处理实际取值：去掉千位空格，保留用户原始输入的小数分隔符
  const inputChar = (event as InputEvent).data;
  this.actualInputValue = displayVal.replace(/\s/g, '').replace('.', inputChar === ',' ? ',' : '.');
}

该方案可完全匹配需求：用户输入123456,78时页面显示123 456.78，actualInputValue存储值为123456,78；用户输入123456.78时页面显示123 456.78，实际存储值为123456.78。

imask 配置优化 #

你当前使用的imask配置已经可以实现核心需求，仅需做小调整即可更贴合场景：

{
  mask: Number,
  scale: 2,
  signed: true,
  thousandsSeparator: ' ',
  padFractionalZeros: true,
  normalizeZeros: true,
  radix: '.',
  // 仅保留逗号映射为小数点，删除不需要的斜杠映射
  mapToRadix: [',']
}

实际取值可以通过imask实例的输入事件直接获取用户原始输入内容，或者自定义变量存储原始分隔符即可。

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