Angular中使用ngx-mask时如何保留.0避免自动截断？

核心原因 #

ngx-mask默认会对数字类型数值做格式化优化，若绑定的是数字1.0，JavaScript本身会将其转换为1，再叠加掩码的自动处理就会丢失.0；另外如果掩码规则未明确指定小数位数，插件也会自动省略末尾的零。

具体解决方案 #

1. 确保绑定值为字符串类型
   从服务端获取数据时，直接保留字符串格式的"1.0"，不要转换为数字类型。组件中声明变量时指定类型为string：

// 组件.ts文件
yourNumericValue: string = "1.0"; // 服务端返回的字符串值直接赋值

若使用响应式表单，初始化FormControl时传入字符串值：

this.form = new FormGroup({
  numberField: new FormControl("1.0")
});

2. 配置精确的掩码规则
   根据需求设置强制保留1位小数的掩码，两种实现方式：

• 使用decimalMask指令指定小数位数：

  <!-- 模板.html文件 -->
  <input type="text" [decimalMask]="1" [(ngModel)]="yourNumericValue">
  

• 使用mask属性定义固定格式：

  <input type="text" mask="0.0" [(ngModel)]="yourNumericValue">
  

3. 处理API返回的数字类型值
   若后端返回的是数字类型的1.0，需手动转换为带固定小数位的字符串：

// 假设API返回的是数字1.0
api.getData().subscribe(res => {
  this.yourNumericValue = res.number.toFixed(1); // 转换为带1位小数的字符串
});

内容的提问来源于stack exchange，提问作者Nguyễn Minh Hiếu