基于Ionic(Angular)的德国本地化货币输入：格式转浮点值问题

我正在使用Ionic(Angular)开发基于德国本地化的货币输入组件，要求显示德国格式的货币（比如1.234,56 €），但后端API仅接受浮点数值（例如：56.00）。

目前已实现的HTML代码如下：

<ion-input 
    #amount="ngModel"
    name="AMOUNT"
    [required]="true"
    [min]="50"
    [max]="20000000"
    (focusout)="rollBackTransformAmount()"
    (focusIn)="transformAmount()"
    [ngModel]="formattedAmount"
    (ngModelChange)="transfer.amount=$event; formattedAmount=$event"
    placeholder="Amount">
</ion-input>

对应的初始TypeScript代码：

transformAmount(){
  if(!isNaN(this.formattedAmount)){
    this.formattedAmount = this.currencyPipe.transform(this.formattedAmount, 'EUR', 'symbol', '1.2-2', 'de');
  }
}

rollBackTransformAmount(){
  // todo
  // 实现将格式化后的值转换为浮点数值
}

更新后的TypeScript代码：

transformAmount(){
  if(!isNaN(this.formattedAmount)){
    this.formattedAmount = this.currencyPipe.transform(this.formattedAmount, 'EUR', 'symbol', '1.0-2', 'de');
  } else {
    this.unFormatCurrencyAmount();
    this.formattedAmount = this.currencyPipe.transform(this.formattedAmount, 'EUR', 'symbol', '1.0-2', 'de');
  }
}

rollBackTransformAmount(){
  this.unFormatCurrencyAmount();
  console.log(this.formattedAmount);
}

unFormatCurrencyAmount(){
  if(this.formattedAmount){
    // eslint-disable-next-line max-len
    this.formattedAmount = this.formattedAmount.replace(getCurrencySymbol('EUR', 'narrow','de'),'').trim().replaceAll('.','').replace(',','.');
  }
}

请问是否有更规范的实现方式？

1. 用自定义表单控件替代手动事件处理 #

直接绑定ngModel和手动处理焦点事件的方式不符合Angular表单设计规范，推荐封装实现ControlValueAccessor接口的自定义货币输入组件，这样能无缝集成到Angular表单体系（支持模板驱动、响应式表单），复用性更强。

2. 依赖原生Intl API处理格式转换 #

手动替换字符的方式易受本地化格式差异影响，存在潜在bug。使用浏览器原生的Intl.NumberFormat处理格式化和解析，更可靠且符合标准。

完整实现示例 #

自定义货币输入组件（currency-input.component.ts）

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

@Component({
  selector: 'app-currency-input',
  templateUrl: './currency-input.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CurrencyInputComponent),
      multi: true
    }
  ]
})
export class CurrencyInputComponent implements ControlValueAccessor {
  @Input() min: number = 0;
  @Input() max: number = Infinity;
  @Input() placeholder: string = '金额';
  
  private rawValue: number | null = null;
  displayValue: string = '';
  isFocused: boolean = false;

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

  // 德式货币格式化器
  private formatter = new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });

  // 用于解析的格式器（获取分隔符信息）
  private parser = new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR'
  });

  writeValue(value: number | null): void {
    this.rawValue = value;
    this.updateDisplayValue();
  }

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

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

  setDisabledState(isDisabled: boolean): void {
    // 可根据需求添加禁用状态的UI处理逻辑
  }

  onFocus(): void {
    this.isFocused = true;
    // 聚焦时显示原始数字值
    this.displayValue = this.rawValue?.toString() || '';
  }

  onBlur(): void {
    this.isFocused = false;
    this.parseDisplayValue();
    this.updateDisplayValue();
    this.onTouched();
  }

  onInputChange(event: Event): void {
    const input = event.target as HTMLInputElement;
    this.displayValue = input.value;
  }

  private parseDisplayValue(): void {
    if (!this.displayValue.trim()) {
      this.rawValue = null;
      this.onChange(null);
      return;
    }

    // 获取德式格式的分隔符
    const formatParts = this.parser.formatToParts(1234.56);
    const decimalSeparator = formatParts.find(p => p.type === 'decimal')?.value || ',';
    const thousandSeparator = formatParts.find(p => p.type === 'group')?.value || '.';
    
    // 转换为标准浮点数字符串
    const numericStr = this.displayValue
      .replace(/[^0-9.,]/g, '') // 移除货币符号等非数字字符
      .replace(new RegExp(`\\${thousandSeparator}`, 'g'), '') // 移除千分位分隔符
      .replace(new RegExp(`\\${decimalSeparator}`), '.'); // 替换小数点为英文点

    this.rawValue = numericStr ? Number(numericStr) : null;
    // 校验数值范围
    if (this.rawValue !== null) {
      this.rawValue = Math.max(this.min, Math.min(this.max, this.rawValue));
    }
    this.onChange(this.rawValue);
  }

  private updateDisplayValue(): void {
    if (!this.isFocused && this.rawValue !== null) {
      this.displayValue = this.formatter.format(this.rawValue);
    } else {
      this.displayValue = this.rawValue?.toString() || '';
    }
  }
}

组件模板（currency-input.component.html）

<ion-input
  [value]="displayValue"
  (input)="onInputChange($event)"
  (focus)="onFocus()"
  (blur)="onBlur()"
  [min]="min"
  [max]="max"
  [placeholder]="placeholder"
  required
></ion-input>

使用示例（模板驱动表单）

<form #form="ngForm">
  <app-currency-input
    name="amount"
    [(ngModel)]="transfer.amount"
    [min]="50"
    [max]="20000000"
    placeholder="Amount"
  ></app-currency-input>
</form>

方案优势 #

• 贴合Angular表单规范，支持多种表单场景，复用性强
• 依赖原生API处理本地化格式，避免手动字符串替换的潜在错误
• 分离显示值与原始值的处理逻辑，代码结构更清晰
• 自动处理焦点切换时的格式转换，用户体验更流畅

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