Angular货币掩码如何实现从右向左输入？

要让你的货币掩码适配价格输入场景，实现从右向左的输入行为（光标默认在右侧，输入内容向左填充），可以通过调整Inputmask的核心配置项来实现，修改后的代码如下：

import { createMask, InputmaskOptions } from "@ngneat/input-mask";

export const createCurrencyMask = (prefix: string = 'MYR'): InputmaskOptions<string> => {
  const regex = new RegExp(`[${prefix},\\s.]`, 'g'); // 新增匹配小数点，保证数值解析正确
  return createMask({
    alias: 'numeric',
    groupSeparator: ',',
    digits: 2,
    digitsOptional: false,
    prefix: `${prefix} `,
    placeholder: '0.00', // 显示完整的价格占位符
    rightAlign: true, // 强制内容右对齐，输入时向左扩展
    insertMode: false, // 关闭插入模式，输入时覆盖占位符而非插入
    radixPoint: '.',
    autoGroup: true, // 自动添加千位分隔符，提升输入体验
    parser: (value: string) => Number(value.replace(regex, ''))
  });
};

关键配置说明 #

• rightAlign: true：将输入框内容设置为右对齐，用户输入时光标默认停在最右侧，输入的新数字会自动向左填充，完全贴合价格输入的习惯
• insertMode: false：关闭插入模式后，输入的数字会从右往左覆盖占位符，避免用户误操作导致小数点位置混乱
• placeholder: '0.00'：设置完整的价格格式占位符，让用户直观了解输入规范，同时配合前两项配置，输入第一个数字时会自动放在分位（比如输入1显示MYR 0.01，输入12显示MYR 0.12）
• autoGroup: true：自动为大数值添加千位分隔符，输入过程中无需手动输入，提升输入效率

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