如何應用管道形成控制值，同時修補angular2

Question

我在當前的應用程序中使用角2的反應形式方法。我有很多輸入字段，我正在修補從服務器獲得的json。

現在我得到了一個要求，就像我必須格式化值，同時顯示併發送實際值。

例如：輸入貨幣字段必須用逗號格式化爲貨幣類型，發送時只是一個數字。

我該如何做到這一點。

我需要值和顯示值的窗體控件。 。

<input type="text" data-test="yearlyRevenue" formControlName="yearlyRevenue" [numberformat]="18" > 

    numberformat is my custom directive to format the data 

Answer 1

在blog.ngconsultant.io你有一個例子。

當「模糊」和「焦點」發生時，「鍵」使用Hotlistener。如果你有兩個功能「變換」和「解析」，你可以做

ngOnInit() { 
    this.el.value = this.transform(this.el.value); 
} 

@HostListener("focus", ["$event.target.value"]) 
onFocus(value) { 
    this.el.value = this.parse(value); // opossite of transform 
} 

@HostListener("blur", ["$event.target.value"]) 
    onBlur(value) { 
    this.el.value = this.transform(value); 
}