Angular 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

所以，指令在这里对您没有帮助，但是，您可以使用 valueChanges 是 Observable 的事实，并基于 干净和好的解决方案在那。基本上，您可以使用 ma​​p + tap 运算符 映射您的更改并将其设置回输入 订阅前。示例：

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。希望对您有所帮助。

Answer 2

Jaume，如果指令应用于输入控件，则可以在指令的构造函数中注入 ElementName 和控件本身

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

所以，你可以添加 HotListener ove input、over focus、over blur...

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