具有反应形式的角管道：仅适用于模糊

【问题标题】：Angular pipes with reactive forms: Apply only on blur具有反应形式的角管道：仅适用于模糊
【发布时间】：2019-11-06 09:08:03
【问题描述】：

我正在尝试为我的输入应用一个使用响应式表单构建的管道

 <input nxInput required type='text'  [value]="billingLetterForm.get('liabilityPercentage').value | percentage"  formControlName='liabilityPercentage'  />

这很好用，但是，如何仅在 blur 事件上应用管道

我找到了this 线程，但这个针对模板驱动表单的实际解决方案不适用于响应式表单

我发现的一个解决方法是在 blur 上编写一个自定义函数并从这里应用管道，但这实际上会修改输入值

【问题讨论】：

标签： angular pipe

【解决方案1】：

您可以使用基于该字段的模糊事件的 Observable 来限制值更新的频率。

简单的方法是将您的字段作为 ViewChild 添加到父组件。这允许从目标是您感兴趣的输入的事件中创建一个可观察对象：

<input nxInput #liabilityPctInput ...>

class ComponentWithLiabilityPctInput {
...
@ViewChild('liabilityPctInput')
liabilityPctInput;

ngOnInit() {
    let liabilityPctInputBlur$ = Rx.Observable.fromEvent(this.liabilityPctInput, 'blur');
    this.valueThatChangesOnBlur$ = liabilityPctInputBlur$
        .pipe(map(() => billingLetterForm.get('liabilityPercentage').value));
  }

}

然后你就可以在模板中使用async管道：

<input nxInput #liabilityPctInput [value]="valueThatChangesOnBlur$ | async | percentage"...>

【讨论】：