Angular 7 react 形式绑定(bind)拦截

标签 angular angular2-forms angular2-directives angular-directive

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

有没有办法通过指令实现真正的拦截行为?

编辑: 我已经为我的案例创建了一个简单示例。请看一下。我想要实现的只是一次(第二次)更改事件调用。

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

最佳答案

所以,指令在这里不会帮助你,但是,你可以利用 valueChangesObservable 的事实并制作一个 干净漂亮的解决方案基于此。基本上,您可以使用ma​​p + 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/

相关文章:

javascript - 以 Angular 2读取excel文件

angular - 如何从 Google Chrome 修复此警告? Cookie... `SameSite=None` 但没有 `Secure`

Angular 2 ngSwitch 指令,内容相同

angular - Angular2 的组件元数据何时需要指令?

angular - 将按钮添加到谷歌地图 Angular2

angular - 如何将数据传递给 Angular Material Bottom Sheet

javascript - 如何在 Angular2 的 DELETE 请求中传递参数

angular - Plotly 工具提示位置应根据光标位置动态变化

具有 contentEditable div 和 ngModel 支持的 Angular 2 表单

Angular 4 无法绑定(bind)到 <property> 因为它不是 <component> 的已知属性