Angular 14货币输入掩码问题：K/M后缀数值未同步至控件值

你当前定义的货币输入掩码在输入K（千）或M（百万）时，UI会自动补全对应0，但控件值未同步更新，核心原因是自定义的parser函数仅提取了纯数字，未处理K/M对应的倍数转换。

原掩码定义及使用代码 #

掩码配置：

public currencyInputMask = createMask({
 alias: 'numeric',
 groupSeparator: ',',
 digits: 0,
 digitsOptional: false,
 prefix: '$ ',
 placeholder: '',
 parser: (value: string) => {      
   let result = value.replace(/[^0-9.-]+/g, "");
   let returnVal = (result && !isNaN(+result)) ? parseInt(result) : '';
   return returnVal;
 }
});

组件模板使用：

<mat-form-field class="blueInput" fxFlex>
    <mat-label>Cash (Checking Accounts/Savings Account)</mat-label>
    <input matInput formControlName="cashControl" [inputMask]="currencyInputMask" autocomplete="off">                         
</mat-form-field>

解决方案：修改parser函数处理K/M后缀 #

更新parser逻辑，识别输入中的K/M后缀，将其转换为对应的数值倍数：

public currencyInputMask = createMask({
 alias: 'numeric',
 groupSeparator: ',',
 digits: 0,
 digitsOptional: false,
 prefix: '$ ',
 placeholder: '',
 parser: (value: string) => {
   // 去除前缀$和分隔符,
   const cleanedValue = value.replace(/^\$ |,/g, '');
   // 匹配数值部分和单位（K/M）
   const match = cleanedValue.match(/^(-?\d+)([KM])?$/i);
   
   if (!match) return '';
   
   const [, numStr, unit] = match;
   const num = parseInt(numStr, 10);
   
   if (isNaN(num)) return '';
   
   // 根据单位计算实际值
   switch (unit?.toUpperCase()) {
     case 'K':
       return num * 1000;
     case 'M':
       return num * 1000000;
     default:
       return num;
   }
 }
});

代码说明 #

1. 清理输入值：先移除前缀$ 和千位分隔符, ，避免干扰数值提取
2. 匹配数值与单位：用正则匹配带可选K/M后缀的整数（支持负数）
3. 单位转换：根据识别到的K/M，将数值乘以对应倍数（K=1000，M=1000000）
4. 边界处理：若输入不合法（非数字+K/M组合），返回空字符串保持原有逻辑

修改后，输入5K时，UI会显示$ 5,000，同时cashControl.value会得到数值5000；输入2M则对应$ 2,000,000和控件值2000000，实现UI与控件值的同步。

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