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

【问题标题】：binding ngModel instead of value to a custom Angular directive for currency input将 ngModel 而不是 value 绑定到用于货币输入的自定义 Angular 指令
【发布时间】：2021-03-30 20:50:50
【问题描述】：

我目前正在使用自定义 mat-input-currency 格式指令来自动将我的字段输入格式化为货币。 npm repo 位于here。

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

这是我从Demo 派生出来的StackBlitz 我尝试编写一个函数，以利用 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>

【问题讨论】：

标签： javascript angular typescript angular-material angular-ngmodel

【解决方案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

【讨论】：

天哪。为什么我不认为管道显示。谢谢！

【解决方案2】：

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

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

或者 Kevin Zhang 的回答也有效。

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

【讨论】：