フォーカスを失ったときに、アンガー4の入力テキスト値を通貨にフォーマットするにはどうすればよいですか？

Question

私はフォーカスを失った後、入力テキストの値を通貨にフォーマットします。どのように私はangular4でそれを達成することができますか？

<input type="text" name="txtamount" [(ngModel)]="amount" /> 

いずれかの提案があります。ありがとう！

Answer 1

CurrencyPipe(blur)のトランスフォームを使用してください。

<input type="text" name="txtamount" [(ngModel)]="amount" 
     (blur)="transformAmount($event)" [(value)]="formattedAmount"/> 
<br/> 
<br/> 
<div> 
    Formatted Amount on loosing focus: {{ formattedAmount }} 
</div> 
<br/> 
<div> 
    Formatted Amount inline with Pipe: {{ amount | currency:'USD' }} 
</div> 

とあなた.TSコードで

、あなたが '@angular/common'から CurrencyPipeをインポートし、アプリケーション providers: [ ... ]にそれを追加する必要があります

transformAmount(element: HtmlElement){ 
    this.formattedAmount = this.currencyPipe.transform(this.amount, 'USD'); 
    // Remove or comment this line if you dont want 
    // to show the formatted amount in the textbox. 
    element.target.value = this.formattedAmount; 
} 

。

---

このPLUNKER DEMO