如何在失去焦点时将输入文本值格式化为角度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代码中,

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

您需要CurrencyPipe从'@angular/common'App 导入并在App中添加providers: [ ... ].

看这个PLUNKER DEMO