Angular响应式表单中如何正确格式化Mat Input的货币输入？

你当前的写法核心错误是把格式化后的字符串直接覆盖了表单控件的原始值：

• 输入3时，currencyPipe将其转为$3.00并赋值给控件，此时控件值已经是带格式的字符串，而非数字。
• 再输入4时，字符会直接追加到字符串末尾，导致出现$3.004这种异常格式。
• 表单模型应该存储原始数字值，格式化仅用于视图展示，不能修改模型本身。

提供两种符合Angular响应式表单规范的实现方式：

方案1：自定义货币输入控件（推荐，可复用） #

创建一个封装了格式化逻辑的自定义表单控件，分离模型值（数字）和视图展示（格式化字符串）：

import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { CurrencyPipe } from '@angular/common';

@Component({
  selector: 'app-currency-input',
  template: `
    <mat-form-field>
      <mat-label>{{label}}</mat-label>
      <input matInput 
             [value]="formattedValue" 
             (input)="handleInput($event.target?.value)"
             [required]="required">
      <mat-error *ngIf="required && !innerValue">Required</mat-error>
    </mat-form-field>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CurrencyInputComponent),
      multi: true
    }
  ]
})
export class CurrencyInputComponent implements ControlValueAccessor {
  innerValue: number | null = null;
  formattedValue = '';
  @Input() label = 'Amount';
  @Input() required = false;

  private onChange = (value: number | null) => {};
  private onTouched = () => {};

  constructor(private currencyPipe: CurrencyPipe) {}

  writeValue(value: number | null): void {
    this.innerValue = value;
    this.formattedValue = value ? this.currencyPipe.transform(value, 'USD', 'symbol') : '';
  }

  registerOnChange(fn: (value: number | null) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  handleInput(inputValue: string | undefined): void {
    if (!inputValue) {
      this.innerValue = null;
      this.formattedValue = '';
      this.onChange(null);
      return;
    }
    // 过滤非数字字符，仅保留数字和小数点
    const rawNumStr = inputValue.replace(/[^0-9.]/g, '');
    const numValue = parseFloat(rawNumStr);
    
    this.formattedValue = isNaN(numValue) ? '' : this.currencyPipe.transform(numValue, 'USD', 'symbol') || '';
    this.innerValue = isNaN(numValue) ? null : numValue;
    this.onChange(this.innerValue);
    this.onTouched();
  }
}

使用时直接在模板中引用：

<app-currency-input formControlName="checkAmount" label="Check Amount" required></app-currency-input>

方案2：模板层直接处理（快速实现） #

不修改表单模型结构，仅通过输入事件处理格式化逻辑：

// 组件类中新增方法
formatCurrencyInput(event: Event): void {
  const input = event.target as HTMLInputElement;
  // 过滤非数字字符
  const rawValue = input.value.replace(/[^0-9.]/g, '');
  const numValue = parseFloat(rawValue);

  if (!isNaN(numValue)) {
    // 更新视图展示的格式化字符串
    input.value = this.currencyPipe.transform(numValue, 'USD', 'symbol') || '';
    // 更新表单模型的原始数字值，禁止触发valueChanges循环
    this.newUnprocessedForm.get('checkAmount')?.setValue(numValue, { emitEvent: false });
  } else {
    input.value = '';
    this.newUnprocessedForm.get('checkAmount')?.setValue(null, { emitEvent: false });
  }
}

修改模板绑定输入事件：

<mat-form-field class="col-md">
  <mat-label>Check Amount</mat-label>
  <input matInput 
         formControlName="checkAmount" 
         required
         (input)="formatCurrencyInput($event)">
  <mat-error *ngIf="submitted && newUnprocessedForm.get('checkAmount')!.errors?.['required']">
     Required
  </mat-error>
</mat-form-field>

• 表单模型必须存储原始数字值，不能用格式化后的字符串替代，否则会破坏表单验证和数据提交逻辑。
• 处理输入时必须过滤非数字字符，避免无效格式干扰。
• 使用{ emitEvent: false }避免触发不必要的valueChanges循环。

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