FormControl valueChanges.subscribe 与 keyup

Question

一个简单的问题，以前没有想到。

我开始了一个项目并找到了代码：

<input (keyup)="someFunc($event)" [formControl]="someControl">

因为我在重构所有的表单，所以我的第一个想法是去掉(keyup)并使用someControl.valueChanges.subscribe(..)，但是现在我有疑问了，因为如果我这样做，我只是在组件中添加了更多的代码（f.ex.import Subscription, OnDestroy 也取消订阅，然后someControl.valueChanges.subscribe）。所以与 keyup 相比，valueChanges.subscribe 增加了更多的代码。

它有什么我不知道的好处吗？

p.s。我知道，使用 keyup，它会在用户释放按钮时触发，而 valueChanges.subscribe 当用户按下按钮时触发。但就我而言，这种差异并不重要。

Answer 1

如果您使用 valueChanges，您也可以使用管道运算符来操作输入值。例如：

this.formControl.valueChanges
.pipe(
    distinctUntilChanged(),
    filter(v => v.length > 3),
    tap(console.log))
.subscribe();

Answer 2

我同意 Tim 对你的 post 的评论："keyUp" 不会被解雇，例如copy-paste 一些文本到您的表单中，而在这种情况下也应该触发 valueChanges AFAIK

Answer 3

我会使用 valuesChanges() 而不是 keyup，因为你不太可能错过任何东西，因为它正在监听表单控件值的更改而不是事件。因此，无论如何，它会被实用地或通过 dom 更改，这些更改将被注意到。

这需要使用取消订阅来处理，因为它不是 http 请求，订阅完成后不会手动取消订阅。我会尝试类似的东西。

public subscriptions = new Subscription();

this.subscriptions.add(this.formControl.valueChanges
.pipe(distinctUntilChanged()) // makes sure the value has actually changed.
.subscribe(data => console.log(data)));

public ngOnDestroy(): void
{
    this.subscriptions.unsubscribe();
    // ensure when component is destroyed the subscription is also and not left open.
}

可以找到取消订阅的示例here

Answer 4

正如我在评论中提到的，valueChanges 将对 copy/pasted 值或从浏览器自动插入的值（自动填充表单）作出反应。此外，在 移动设备 上，关键事件可能不是正确的选择，因为其他事件可能会导致表单中的值发生变化。

在我看来，KeyListeners 应该只在没有好的选择时使用。它们可能会影响您应用的性能。

FormControl valueChanges.subscribe 与 keyup

FormControl valueChanges.subscribe vs keyup

rxjs

angular

angular-forms