本文详解如何通过 Ngx-Mask 的 mask="separator.2" 配合 [leadZero]="true" 等配置，实现用户输入数字后自动格式化为带两位小数的金额（如 123 → 123.00），并说明如何提取总位数与小数位数。
本文详解如何通过 ngx-mask 的 `mask="separator.2"` 配合 `[leadzero]="true"` 等配置，实现用户输入数字后自动格式化为带两位小数的金额（如 123 → 123.00），并说明如何提取总位数与小数位数。
在金融、电商等业务场景中，金额输入需严格遵循「整数部分千分位分隔 + 固定两位小数」的显示规范，且用户未输入小数时应自动补零（如输入 123 显示为 123.00，输入 142.1 显示为 142.10）。Ngx-Mask 提供了开箱即用的解决方案，但关键在于正确组合掩码类型与增强属性。
✅ 核心配置解析
以下是最推荐的 HTML 模板写法（适配 Angular Reactive Forms）：
<input type="text" class="form-control form-control-sm" maxlength="19" formControlName="basePrice" autocomplete="off" prefix="R$ " mask="separator.2" decimalMarker="," [leadZero]="true" thousandSeparator="." separatorLimit="9999999999">
-
mask="separator.2"：启用带两位小数的数值格式化（.2表示固定两位小数）； -
[leadZero]="true"：最关键属性——强制补零至指定小数位，确保142.1→142.10，73→73.00； -
decimalMarker=","：设置小数点符号为逗号（适用于巴西雷亚尔 R$ 等地区）； -
thousandSeparator="."：千分位使用英文句点（如1.234,56）； -
prefix="R$ "：前置货币符号，不影响数值解析； -
separatorLimit：限制最大可输入数值范围，避免溢出。
⚠️ 注意：
[leadZero]="true"必须以属性绑定形式书写（带方括号），否则不会生效；若写成leadZero="true"（字符串字面量），Angular 将其视为false。
? 提取数字精度信息（位数与小数位）
Ngx-Mask 本身不直接暴露「总位数」或「小数位数」变量，但可通过监听 valueChanges 结合正则解析获取：
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';
@Component({ /* ... */ })
export class PriceInputComponent implements OnInit, OnDestroy {
basePrice = new FormControl('');
private sub!: Subscription;
ngOnInit() {
this.sub = this.basePrice.valueChanges.subscribe(value => {
if (!value) return;
// 提取纯数字（去除前缀、分隔符、空格）
const numericStr = value.replace(/[^0-9,]/g, '').replace(',', '.');
const num = Number(numericStr);
// 解析小数位数（原始输入中显式的小数部分长度）
const decimalPart = value.split(',').pop() || '';
const decimalDigits = decimalPart.length;
// 总有效数字位数（不含分隔符和前缀）
const totalDigits = numericStr.replace('.', '').length;
console.log({
rawValue: value,
parsedNumber: num,
decimalPlaces: decimalDigits,
totalDigits
});
});
}
ngOnDestroy() {
this.sub?.unsubscribe();
}
}✅ 输出示例：
| 输入显示 | decimalPlaces | totalDigits | parsedNumber |
|----------|------------------|----------------|----------------|
| R$ 123 | 0 | 3 | 123 |
| R$ 142,1 | 1 | 4 | 142.1 |
| R$ 73,30 | 2 | 4 | 73.3 |
? 提示：若需严格校验「必须为两位小数」，建议在表单验证器中补充自定义 Validator，检查
value.match(/,\d{2}$/)是否匹配。
✅ 总结
- 使用
mask="separator.2"+[leadZero]="true"是实现「自动补零+格式化」的黄金组合； - 地区化符号（
decimalMarker/thousandSeparator）需与prefix协同配置； - 数值精度信息需手动解析原始输入字符串，不可依赖 Mask 内部状态；
- 生产环境务必配合后端校验——前端格式化仅用于体验优化，真实数值应以
parseFloat()或Intl.NumberFormat安全解析后提交。
通过以上配置与扩展，你将获得专业级的金额输入体验，兼顾用户体验与数据准确性。
