Angular 货币编辑器

Question

我需要在 Angular 中制作一个表单控件，该控件支持编辑具有负数支持和全键盘支持的货币值，以便用户可以在输入之间切换，键入负号，然后输入值。我尝试过 ngx-currency、PrimeNG 输入数字和 ngx-mask，但无法完全得到我需要的。
这是一个 StackBlitz到目前为止我所拥有的。
ngx-货币

<input currencyMask [(ngModel)]="value">

PrimeNG 输入编号

<p-inputNumber [(ngModel)]="value" mode="currency"
  currency="USD" locale="en-US"></p-inputNumber>

ngx-掩码

<input [(ngModel)]="value" mask="separator" thousandSeparator=","
  prefix="$" [allowNegativeNumbers]="true">

ngx-货币
您需要在键入值后键入负号，这有点反直觉，一旦键入负号，光标就会转到输入的末尾。
PrimeNG
当您键入负号时，下一个数字会导致光标跳到末尾的美分后面，使其完全无法使用。
ngx-掩码
它是可用的，但我不知道如何让美分始终为小数点后两位，减号在 $ 符号之后而不是在 $ 之前。它是最接近的，因为它可用，但显示为 50.5 美元而不是 50.50 美元的值(value)会被我的产品所有者拒绝。
该控件将用于电子表格样式页面，其中在输入和输入字符 -50.50 之间使用制表符需要使值成为负的 50 美元和 50 美分。

Answer 1

你不能用三个不同的库做这么基本的事情，真是令人惊讶……
即使在阅读了文档并尝试了一些测试之后，我也面临着与您相同的问题，我很想知道您的问题的好答案。
在等待的同时，您可以做的是使用 ngx-currency 来欺骗前缀。 .如果用户键入减号，则将前缀从“$”更新为“-$”:
HTML

<input [(ngModel)]="value" mask="separator.2" thousandSeparator="," [prefix]="prefix" [allowNegativeNumbers]="false" (keyup)="updatePrefix($event)">

TS

updatePrefix(event: any) {
    if (event.key === "-") {
        this.prefix = this.prefix === "$" ? "-$" : "$";
    }
}

查询 demo