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

Jaume，如果指令应用于输入控件，则可以在指令的构造函数中注入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的事实，并提出一个干净且不错的解决方案< / strong>。基本上，您可以使用 map +点击操作符来映射您的更改，并将其设置回输入订阅前。示例：

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

Angular 7反应形式绑定拦截

2 个答案: