如何使用Ngx-Mask将输入转换为十进制数并提取位数变量？

一、适配需求的掩码配置 #

针对你提出的三个显示场景：

1. 输入123 → 显示123.00
2. 输入142.1 → 显示142.10
3. 输入73.30 → 显示73.00

这里第三个场景需要舍去输入的小数部分，仅保留整数位加固定两位小数，结合前两个补位需求，需要掩码配置+输入事件处理结合实现：

1. 模板与基础掩码设置 #

<input 
  type="text" 
  [mask]="decimalMask" 
  [(ngModel)]="inputValue"
  (blur)="formatOnBlur()"
/>

2. 组件类逻辑（含变量配置） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-decimal-input',
  templateUrl: './decimal-input.component.html'
})
export class DecimalInputComponent {
  inputValue: string;
  // 提取为可配置变量
  decimalPlaces = 2;
  maxIntegerDigits = 10; // 整数部分最大位数，可自定义

  // 动态生成掩码：允许整数位 + 小数位输入，方便用户输入带小数的内容
  get decimalMask(): string {
    return `0{1,${this.maxIntegerDigits}}.${'0'.repeat(this.decimalPlaces)}`;
  }

  // 失焦时格式化，舍去小数部分补两位0
  formatOnBlur(): void {
    if (!this.inputValue) return;
    // 提取整数部分，若没有则设为0
    const integerPart = this.inputValue.split('.')[0] || '0';
    // 拼接成目标格式
    this.inputValue = `${integerPart}.${'0'.repeat(this.decimalPlaces)}`;
  }
}

3. 若需求为保留输入小数并补两位（修正笔误场景） #

如果73.30需保持73.30而非73.00，只需简化掩码配置，无需额外格式化函数：

get decimalMask(): string {
  return `*.${'0'.repeat(this.decimalPlaces)}`;
}

模板中去掉(blur)事件即可，输入时会自动补全两位小数。

二、总位数与小数位数的变量化配置 #

如上述代码所示，完全可以将decimalPlaces（小数位数）、maxIntegerDigits（整数最大位数）提取为组件变量，甚至可以升级为全局配置项：

• 直接修改变量值即可统一调整所有输入框的格式规则
• 若需限制总位数（整数+小数），可通过totalDigits = maxIntegerDigits + decimalPlaces计算，再调整掩码逻辑

三、关键注意事项 #

• 确保已在Angular模块中正确导入并注册NgxMaskModule
• 若使用响应式表单，可通过FormControl的valueChanges事件替代blur事件实现实时格式化
• 掩码规则中的0代表必填位，*代表可选位，可根据需求调整

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