代码之家 › 专栏 › 技术社区 › Jaume

角7反应式结合拦截

angular-directive angular2-directives angular2-forms angular

1

Jaume · 技术社区 · 7 年前

我想将数据(由用户提供)格式化为我自己的格式或动态更改它们(例如,当用户输入的值小于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

2 回复 | 直到 7 年前

1

0

Eliseo 7 年前

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

2

0

Amir Arbabian 7 年前

所以, 指令没用 你在这里,但是,你可以利用这个事实 valueChanges 是 Observable 做一个 干净又好的溶液 基于这个。基本上你可以用 map+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 . 希望能有所帮助。