Angular输入字段货币格式化问题：ngModel绑定显示与更新异常

问题根源分析 #

你当前的代码存在几个关键问题：

• 初始类型污染：ngOnInit里用currencyPipe.transform把数值转成了字符串，导致project.cost和costRH从数值变成了字符串类型，后续管道处理和解析逻辑全部混乱。
• 绑定冲突：<input>同时使用[(ngModel)]和[value]，ngModel的绑定优先级更高，会直接覆盖[value]的格式化结果，所以输入框不会显示货币格式。
• 解析逻辑缺陷：currencyPipe.parse对带欧元符号（€）的字符串解析支持不佳，无法正确提取数值。

修复方案 #

我们需要保持project属性的数值类型，分离「显示格式化」和「数值存储」的逻辑，具体实现如下：

1. 组件代码修改

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [CurrencyPipe]
})
export class AppComponent {
  project = {
    cost: 56896,
    costRH: 27829
  };

  // 用于存储输入框的格式化显示值
  displayCost = '';
  displayCostRH = '';

  constructor(private currencyPipe: CurrencyPipe) {
    // 初始化时格式化显示值
    this.displayCost = this.currencyPipe.transform(this.project.cost, 'EUR', 'symbol', '1.0-0') || '';
    this.displayCostRH = this.currencyPipe.transform(this.project.costRH, 'EUR', 'symbol', '1.0-0') || '';
  }

  onBlur(field: 'cost' | 'costRH', inputValue: string) {
    // 解析输入值：移除所有非数字字符，转成数值
    const parsedValue = parseFloat(inputValue.replace(/[^0-9]/g, ''));
    if (!isNaN(parsedValue)) {
      this.project[field] = parsedValue;
      // 重新格式化显示
      this[`display${field.charAt(0).toUpperCase() + field.slice(1)}`] = this.currencyPipe.transform(parsedValue, 'EUR', 'symbol', '1.0-0') || '';
    }
  }
}

2. 模板代码修改

<form>
  <label for="cost">Cost</label>
  <input 
    [(ngModel)]="displayCost" 
    (blur)="onBlur('cost', displayCost)"
    type="text"
    id="cost"
  >

  <label for="costRH">Cost RH</label>
  <input 
    [(ngModel)]="displayCostRH" 
    (blur)="onBlur('costRH', displayCostRH)"
    type="text"
    id="costRH"
  >
</form>

更优雅的复用方案：自定义表单控件（ControlValueAccessor） #

如果需要在多个组件复用这个货币输入功能，可以封装成自定义表单控件，统一处理格式化和解析逻辑：

1. 创建货币输入组件

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

@Component({
  selector: 'app-currency-input',
  template: `
    <input 
      [(ngModel)]="displayValue"
      (blur)="onBlurHandler()"
      type="text"
    >
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CurrencyInputComponent),
      multi: true
    },
    CurrencyPipe
  ]
})
export class CurrencyInputComponent implements ControlValueAccessor {
  displayValue = '';
  private onChange: (value: number) => void = () => {};
  private onTouched: () => void = () => {};

  constructor(private currencyPipe: CurrencyPipe) {}

  writeValue(value: number): void {
    this.displayValue = this.currencyPipe.transform(value, 'EUR', 'symbol', '1.0-0') || '';
  }

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

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

  onBlurHandler() {
    const parsedValue = parseFloat(this.displayValue.replace(/[^0-9]/g, ''));
    if (!isNaN(parsedValue)) {
      this.onChange(parsedValue);
      this.displayValue = this.currencyPipe.transform(parsedValue, 'EUR', 'symbol', '1.0-0') || '';
    }
    this.onTouched();
  }
}

2. 在父组件中使用

<form>
  <label for="cost">Cost</label>
  <app-currency-input [(ngModel)]="project.cost" id="cost"></app-currency-input>

  <label for="costRH">Cost RH</label>
  <app-currency-input [(ngModel)]="project.costRH" id="costRH"></app-currency-input>
</form>

这个方案既保持了project属性的数值类型，又实现了输入框的货币格式显示，同时在失去焦点时自动解析更新数值。

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