Angular 5中使用Currency Pipe实时更新输入框值求助

我懂你这种困扰——Angular自带的Currency Pipe确实只能在绑定值变更时触发更新，一般就是输入框失焦后才会生效，没法做到输入时实时跟着变格式。我之前也遇到过类似需求，用自定义指令就能完美解决，给你一步步拆解方案：

核心思路是通过指令监听输入框的input事件，实时清洗输入内容、调用Currency Pipe格式化，同时处理光标位置避免体验问题。

1. 创建自定义指令 #

新建一个currency-mask.directive.ts文件，内容如下：

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

@Directive({
  selector: '[appCurrencyMask]'
})
export class CurrencyMaskDirective {
  // 可配置参数，和CurrencyPipe的参数对应
  @Input() currencyCode: string = 'USD';
  @Input() display: string = 'symbol';
  @Input() digitsInfo: string = '1.2-2';

  private el: HTMLInputElement;
  private previousValidValue: string = '';

  constructor(private elementRef: ElementRef, private currencyPipe: CurrencyPipe) {
    this.el = this.elementRef.nativeElement;
  }

  // 监听输入事件，实时处理
  @HostListener('input', ['$event']) onInputChange(event: Event) {
    // 移除所有非数字、小数点和开头负号的字符
    let rawValue = this.el.value.replace(/(?!^-)[^0-9.]/g, '');
    
    // 处理多个小数点或多个负号的异常情况
    if (rawValue.split('.').length > 2 || (rawValue.match(/-/g) || []).length > 1) {
      rawValue = this.previousValidValue.replace(/[^0-9.-]/g, '');
    }

    // 调用CurrencyPipe格式化数值
    const formattedValue = this.currencyPipe.transform(rawValue, this.currencyCode, this.display, this.digitsInfo);
    
    // 保存上一次的有效格式化值，用于异常输入回滚
    this.previousValidValue = formattedValue || '';
    
    // 设置格式化后的值到输入框
    this.el.value = formattedValue;
    
    // 调整光标位置，避免格式化后光标跳转到末尾
    const originalCursorPos = this.el.selectionStart;
    const diff = formattedValue.length - (this.previousValidValue.length - (originalCursorPos || 0));
    setTimeout(() => {
      this.el.setSelectionRange(diff, diff);
    }, 0);
    
    event.preventDefault();
  }

  // 失焦时做最终校验，处理空值或不完整输入
  @HostListener('blur') onBlur() {
    if (this.el.value.trim() === '') {
      this.el.value = '';
    } else {
      const cleanValue = this.el.value.replace(/[^0-9.-]/g, '');
      this.el.value = this.currencyPipe.transform(cleanValue, this.currencyCode, this.display, this.digitsInfo) || '';
    }
  }
}

2. 在模块中注册指令 #

打开你的根模块（比如app.module.ts），导入并声明这个指令：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common'; // 必须导入，因为CurrencyPipe来自这里

import { AppComponent } from './app.component';
import { CurrencyMaskDirective } from './currency-mask.directive';

@NgModule({
  declarations: [
    AppComponent,
    CurrencyMaskDirective // 声明自定义指令
  ],
  imports: [
    BrowserModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在模板中使用指令 #

现在你可以在输入框上直接使用appCurrencyMask指令，还能通过输入参数自定义货币类型、显示格式和小数位数：

<!-- 默认美元，带符号，保留2位小数 -->
<input type="text" appCurrencyMask placeholder="输入金额">

<!-- 自定义欧元，显示货币代码，不保留小数 -->
<input type="text" appCurrencyMask 
       [currencyCode]="'EUR'" 
       display="code" 
       digitsInfo="1.0-0"
       placeholder="输入欧元金额">

关键细节说明 #

• 输入清洗：通过正则过滤掉非数字、非小数点和非开头负号的字符，确保输入内容合法
• 异常处理：如果用户输入多个小数点或负号，会回滚到上一次的有效值，避免格式混乱
• 光标调整：格式化后通过计算光标位置的变化，保持光标在输入的位置，提升用户体验
• 失焦校验：失焦时再次格式化，确保最终值的正确性，同时处理空值情况

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