如何在Angular中根据用户区域实时格式化输入框为货币格式

要实现基于用户区域的动态货币掩码，核心是利用Angular原生的CurrencyPipe结合用户浏览器的区域信息（navigator.language），自动匹配对应区域的货币符号和千分位格式。以下是对原示例中第一个输入框对应指令及使用代码的修改：

修改后的currency-mask.directive.ts代码 #

import { Directive, ElementRef, HostListener, OnInit, Inject } from '@angular/core';
import { CurrencyPipe, LOCALE_ID } from '@angular/common';

@Directive({
  selector: '[currencyMask]'
})
export class CurrencyMaskDirective implements OnInit {
  private el: HTMLInputElement;
  private locale: string;
  private rawValue: number | null = null;

  constructor(
    private elementRef: ElementRef,
    private currencyPipe: CurrencyPipe,
    @Inject(LOCALE_ID) defaultLocale: string
  ) {
    this.el = this.elementRef.nativeElement;
    this.locale = navigator.language || defaultLocale;
  }

  ngOnInit() {
    if (this.el.value) {
      this.formatValue(this.el.value);
    }
  }

  @HostListener('input', ['$event'])
  onInput(event: InputEvent) {
    const inputValue = this.el.value.replace(/[^0-9\-]/g, '');
    const numValue = inputValue ? parseFloat(inputValue) : null;
    
    if (numValue !== null) {
      this.rawValue = numValue;
      const formattedValue = this.currencyPipe.transform(numValue, 'AUTO', 'symbol', '1.0-0', this.locale);
      if (formattedValue) {
        const cursorPosition = this.el.selectionStart;
        const originalLength = this.el.value.length;
        this.el.value = formattedValue;
        const newLength = formattedValue.length;
        const diff = newLength - originalLength;
        this.el.setSelectionRange(cursorPosition + diff, cursorPosition + diff);
      }
    } else {
      this.el.value = '';
      this.rawValue = null;
    }
  }

  getRawValue(): number | null {
    return this.rawValue;
  }

  private formatValue(value: string) {
    const numValue = parseFloat(value.replace(/[^0-9\-]/g, ''));
    if (!isNaN(numValue)) {
      this.el.value = this.currencyPipe.transform(numValue, 'AUTO', 'symbol', '1.0-0', this.locale) || '';
      this.rawValue = numValue;
    }
  }
}

组件中第一个输入框的使用 #

确保指令已在模块中导入声明，模板中保持输入框原有结构即可：

<input type="text" currencyMask [(ngModel)]="amount" placeholder="输入金额">

关键修改点说明 #

• 区域动态适配：通过navigator.language获取用户浏览器区域设置，自动匹配对应货币符号（如$、€、¥）和千分位分隔符
• 复用原生能力：借助Angular的CurrencyPipe处理格式化逻辑，避免手动编写复杂的区域适配代码
• 优化输入体验：格式化后自动调整光标位置，避免光标跳转到输入框开头
• 保留原始值：维护未格式化的数字值，方便表单双向绑定与业务逻辑处理

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