Angular 12+ 响应式表单如何简单应用显示掩码/管道？

原有方案失效的核心原因 #

• 输入框设置type="number"：该类型原生仅支持纯数字值，带千分位逗号的格式化字符串会被浏览器直接拦截丢弃
• 绑定冲突：使用formControlName后，Angular会自动接管输入框的value属性，额外编写的[value]绑定会被表单控件的原始值覆盖，这也是模板中.value/.valueChanges位置报类型错误的直接原因
• 管道参数格式错误：DecimalPipe的参数规则为整数位最小长度.小数位最小长度-小数位最大长度，你写的'9.2.2'不符合规范，固定保留两位小数应使用'1.2-2'
• 异步值未做清洗：直接把valueChanges推送的用户输入值传给number管道，输入过程中产生的非纯数字内容会直接导致管道抛错

最简实现（无需手动编写subscribe订阅逻辑） #

不需要冗余的值变更订阅、循环patchValue逻辑，按以下步骤修改即可：

1. 调整模板：将输入框类型改为text避免原生拦截，处理好输入、聚焦、失焦的逻辑，兼顾编辑体验和格式化效果：

<form [formGroup]="fg">
  <input
    type="text"
    class="fc"
    placeholder="请输入数值"
    [formControl]="fg.get('fcTest')"
    id="fcTest"
    [value]="fg.get('fcTest').value | number: '1.2-2'"
    (input)="fg.get('fcTest').setValue($event.target.value.replace(/,/g, ''), {emitEvent: false})"
    (focus)="$event.target.value = fg.get('fcTest').value"
  />
</form>

如果你的需求是输入分单位整数、展示元单位千分位金额（即输入1000000时展示10,000.00），只需要把value绑定行替换为[value]="(fg.get('fcTest').value / 100) | number: '1.2-2'"即可，表单控件存储的始终是原始纯数字值，不影响校验、接口提交逻辑。

2. 组件类无需额外添加订阅逻辑，保持原有表单初始化代码即可，注意提前在所属模块导入CommonModule（内置DecimalPipe属于该模块的导出内容）：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  fg: FormGroup;
    
  constructor(private fb: FormBuilder) {
    this.fg = this.fb.group({
      fcTest: ['', [Validators.required]]
    });
  }
}

实现说明 #

• 表单控件内始终存储无格式的纯数字值，和原有校验、提交流程完全兼容
• 用户输入时自动过滤千分位逗号，避免非数字值存入控件
• 聚焦输入框时自动切回原始纯数字值，方便用户编辑，不会出现需要手动删除逗号的问题
• 失焦状态自动展示千分位+固定两位小数的格式化效果，如果需要实时输入时格式化，只需要把格式化逻辑移到input事件即可，注意实时格式化容易出现光标跳位问题，更推荐失焦格式化的交互方案。

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