如何在angular2中修补时应用管道以形成控制值答案

【问题标题】：How to apply pipe to form control value while patching in angular2如何在angular2中修补时应用管道以形成控制值
【发布时间】：2017-10-13 12:04:27
【问题描述】：

我在当前的应用程序中使用 angular 2 的反应形式方法。我有很多输入字段，我正在修补从服务器获得的 json。

现在我有一个要求，例如我必须在显示时格式化值并在发送时发送实际值。

例如：输入货币字段必须用逗号格式化货币类型，并且在发送时只是一个数字。

我怎样才能做到这一点。

我需要表单控件的值和显示值。 .

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

    numberformat is my custom directive to format the data

【问题讨论】：

标签： angular angular2-forms angular-reactive-forms

【解决方案1】：

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

当“模糊”和“焦点”发生时，“关键”是使用 Hotlistener。如果你有两个函数“transform”和“parse”你可以做

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

【讨论】：