將 ngModel 而不是 value 綁定到自定義 Angular 指令以進行貨幣輸入

Question

我目前正在使用自定義 mat-input-currency 格式指令來自動將我的字段輸入格式化為貨幣。 npm 存儲庫可在此處找到。

但是，該指令將元素數據綁定到輸入 i 的[value]並且我需要將其 2 路綁定到[(ngModel)]綁定有效，但貨幣格式顯示在首次加載時不顯示，僅單擊輸入然后變得模糊時。 但是，將其綁定到[value]時，會在加載時以貨幣格式顯示它。

這是我從演示中分叉的StackBlitz ，我嘗試編寫 function 可能是為了利用 onload 事件進行輸入，但不確定如何使用 go。 有沒有辦法讓它以 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>

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"

或凱文張的答案也有效。

希望這可以幫助下一個人。