将 ngModel 而不是值绑定到用于货币输入的自定义 Angular 指令

Question

我目前正在使用自定义 mat-input-currency 格式指令自动将我的字段输入格式化为货币。找到 npm 存储库 here.

但是，该指令将元素数据绑定到输入 i 的 [value]，我需要将其双向绑定到 [(ngModel)] 绑定有效，但货币格式显示在首次加载时不显示，仅在单击输入然后变得模糊时显示。但是，将其绑定到 [value]，在加载时以货币格式显示。

这是 StackBlitz I forked from the Demo 我尝试编写一个函数，也许可以利用输入的 onload 事件，但不确定如何去做。有没有办法让它以 ngModel 格式加载？事件似乎没有在 onload 中开始。

  <mat-form-field *ngIf="mpPatient.ssissdiawardLetter=='Y'" appearance="standard">
          <mat-label>SSI/SSDI Award Amount</mat-label>
          <input matInput type="text"
         (onload)="onLoadCurrencyEvent($event, mpPatient.ssissdiawardAmount)"
          mvndrMatCurrencyFormat [allowNegative]="false" [currencyCode]="'USD'"
          [(ngModel)]="mpPatient.ssissdiawardAmount"
          (blur)="updateUSAmount($event, mpPatient.ssissdiawardAmount)">
        </mat-form-field>

Answer 1

由于你使用的指令我在github中找不到源代码，所以我不知道这个自定义指令发生了什么。从你的代码来看，我认为你可以 Angular CurrencyPipe，它将提供你想要的格式。

<mat-form-field class="example-full-width">
            <input matInput type="text"
      [value]="testvalue | currency:'USD'" />
</mat-form-field>

我分叉给你演示，仅供参考：https://stackblitz.com/edit/angular-3gatlt?file=src/app/app.component.html

Answer 2

实际上是在我发布这个问题 5 分钟后，我找到了答案。就像将 ngModel 分解成它的部分一样简单。即属性绑定和事件绑定。所以我的 [(ngModel)]="mpPatient.ssissdiawardAmount" 变成

[value]="mpPatient.ssissdiawardAmount"
(input)="mpPatient.ssissdiawardAmount = $event.target.value"

或者 Kevin Zhang 的答案也有效。

希望这对下一个人有所帮助。

将 ngModel 而不是值绑定到用于货币输入的自定义 Angular 指令

binding ngModel instead of value to a custom Angular directive for currency input

javascript

typescript

angular-ngmodel

angular-material

angular