角7种反应形式结合拦截

Question

我想格式化数据（由用户提供）到我自己的格式或改变他们的飞行（如设定为0时，用户把这样的一个值低于0或东西）。我主要是使用反应溶液形式与代码连接视图后面。我已经通过拦截我FormControl类型的变量和视图得益于指令在控制之间的结合做了。我想留在这一点，但问题是，该指令是不是真实的拦截器作为一种价值变动事件与错误的值出现，然后被指示功能（改变事件被称为第二次）格式。这是我实现了：

@HostListener("blur", ["$event.target.value"])onBlur(event: any) {
    let value = this.transformValue(event);
    this.control.setValue(value, { emitEvent: false });
    this.el.value = value;
}

有没有一种方法，以实现通过指令真正的拦截行为？

编辑：我已经创建了我的情况的简单示例。请看一下。我想实现的是只有一个（第二）改变事件的呼叫。

https://stackblitz.com/edit/angular-ctnjup

Answer 1

乌梅，在一个指令，你可以注入的ElementName和控制自身的构造，如果该指令适用于输入控制

constructor(private elementRef: ElementRef,private control:NgControl) {
   //this.control was the control itself
}

所以，你可以添加HotListener奥雅纳输入，过焦点，在模糊...

@HostListener("blur", ["$event.target.value"])onBlur(event: any) {
    let value = this.transformValue(event);
    this.control.setValue(value, { emitEvent: false });
    this.el.value = value;
}

Answer 2

因此，指令不会帮助你在这里，但是，你可以使用这一事实，valueChanges是Observable，并根据一个干净，漂亮的解决方案。基本上，你可以使用地图+自来水运营商映射的更改和订阅之前设置回输入。例：

this.sub$ = this.formControl.valueChanges.pipe(
  map(x => x === "" ? 0 : parseFloat(x) || 0),
  tap(x => this.formControl.setValue(x, {emitEvent: false}))
).subscribe(x => {
  console.log("change: " + x);
  this.changes.push(x);
});

工作stackblitz example。希望帮助。