我想将数据(由用户提供)格式化为我自己的格式或即时更改它们(例如,当用户输入的值低于 0 或类似值时设置为 0)。我主要使用响应式(Reactive)表单解决方案将 View 与隐藏代码连接起来。由于指令,我通过拦截 FormControl 类型的变量和 View 上的控件之间的绑定(bind)来完成它。我想继续这样做,但问题是该指令不是真正的拦截器,因为值更改事件以错误的值发生,然后由指令函数格式化(第二次调用更改事件)。这就是我实现这一目标的方式:
@HostListener("blur", ["$event.target.value"])onBlur(event: any) {
let value = this.transformValue(event);
this.control.setValue(value, { emitEvent: false });
this.el.value = value;
}
有没有办法通过指令实现真正的拦截行为?
编辑: 我已经为我的案例创建了一个简单示例。请看一下。我想要实现的只是一次(第二次)更改事件调用。
最佳答案
所以,指令在这里不会帮助你,但是,你可以利用 valueChanges
是 Observable
的事实并制作一个 干净漂亮的解决方案基于此。基本上,您可以使用map + tap operators 映射您的更改并将它们设置回输入订阅前。示例:
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 react 形式绑定(bind)拦截,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54606991/