ng2-currency-mask空输入框无法输入负号的问题及替代方案咨询

一、修复现有ng2-currency-mask的方案 #

自定义指令强制允许空框输入负号 #

你可以编写一个Angular指令，监听输入框的键盘事件，当输入框为空且按下减号时，手动设置输入值为-，绕过组件的限制：

import { Directive, HostListener, ElementRef, Inject } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[allowEmptyNegative][currencyMask]'
})
export class AllowEmptyNegativeDirective {
  constructor(
    private el: ElementRef<HTMLInputElement>,
    @Inject(NgControl) private ngControl: NgControl
  ) {}

  @HostListener('keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent): void {
    const input = this.el.nativeElement;
    if (event.key === '-' && input.value.trim() === '') {
      event.preventDefault();
      // 手动设置值并触发表单控件变更
      this.ngControl.control?.setValue('-');
      input.value = '-';
      // 触发input事件确保组件识别变更
      input.dispatchEvent(new Event('input'));
    }
  }
}

使用时在输入框上添加该指令：

<input currencyMask allowEmptyNegative [(ngModel)]="yourValue" />

修改ng2-currency-mask源码（不推荐，维护成本高） #

如果上述指令无效，可以直接修改ng2-currency-mask的核心处理逻辑：

1. 找到组件的键盘事件处理代码（通常在currency-mask.directive.ts）
2. 定位限制负号输入的判断条件，移除"输入框为空时禁止输入负号"的逻辑
3. 重新编译组件或在项目中引入修改后的文件

二、替代工具推荐 #

如果不想折腾现有组件，这些工具可以直接满足需求：

• ngx-currency：ng2-currency-mask的官方升级版本，完美适配Angular 15，默认支持空框输入负号，配置项和原组件兼容，迁移成本极低。
• Angular Material 数字输入框：结合MAT_NUMBER_FORMATS自定义货币格式，原生支持负值输入，适合使用Material组件库的项目。示例配置：

  import { MAT_NUMBER_FORMATS } from '@angular/material/core';
  
  export const CUSTOM_CURRENCY_FORMATS = {
    parse: {
      currency: false,
    },
    display: {
      currencySymbol: '$',
      currencyCode: 'USD',
      format: 'symbol',
    },
  };
  
  @NgModule({
    providers: [
      { provide: MAT_NUMBER_FORMATS, useValue: CUSTOM_CURRENCY_FORMATS }
    ]
  })
  export class AppModule {}
  

• text-mask：高度灵活的掩码库，可自定义货币格式和负值输入规则，适合需要特殊格式定制的场景。

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