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

编程问答 2022-06-02

问题描述

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

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

这是我从 StackBlitz 分叉的 Demo 我尝试编写一个函数，可能是为了输入一个 onload 事件，但不知道如何去做。有没有办法让它以 ngModel 格式加载？该活动似乎并未在加载中开始。

  <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>

解决方法

由于你使用的指令我在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

,

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

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

或者 Kevin Zhang 的回答也有效。

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

angularangularangular-materialangular-ngmodeljavascripttypescripttypescripttypescript