角度反作用形式值随管道而变化.这是一个错误吗? [英] angular reactive form valuechanges with pipe. IS THIS A BUG ???

问题描述

似乎管道无法与反应式表单控件valueChanges一起使用.我已经准备了 https://stackblitz.com/edit/angular-vdeqrz 您可以重现该问题.

在文本字段中输入内容.然后输入"boom"(不带引号).错误捕获后，控件不再起作用. 您可以在此之后验证是否输入了新内容.它不会检测到任何其他输入.

如果刷新页面，则它将再次起作用.

我在这里想念什么吗?

解决方案

这不是错误.每个Rx流都可以发出零个或多个next通知和一个error或complete通知，但不能两者都发出.

因此，如果您使用throwError，则该链将自行处理，因为您永远不会拥有同一链发出两个或多个您期望的error通知.

显然有很多方法可以避免这种情况.您可以使用不同于throwError的东西，并用一些对象包装输入值.但是那样一来，您将无法在观察者的error处理程序中对其进行处理.

您还可以使用retry和tap来处理错误:

this.query.valueChanges
  .pipe(
    switchMap(d => (d === 'boom') ? throwError(new Error("boom")) :  of(d)),
    tap({ error: err => console.log(err) }),
    retry(),
  )
  .subscribe({
    next: d => console.log(d),
    complete: () => console.log("complete")
  })

由于错误永远不会到达观察者，因此您必须在此处使用tap.

您更新的演示: https://stackblitz .com/edit/angular-1qfn2z?file = src/app/app.component.ts

Seems like pipe doesn't work with reactive form control valueChanges. i've prepared this https://stackblitz.com/edit/angular-vdeqrz so that you can reproduce the problem.

type something in the text field. then type "boom" (without the quotes). after the error catch, the control does not work any more. you can verify typing something new on it after that. it does not detect any other input.

if you refresh the page, then it works again.

am i missing something here ?

解决方案

This is not a bug. Every Rx stream can emit zero or more next notifications and one error or complete notification but never both.

So if you use throwError the chain will dispose itself because you can never have the same chain emitting two or more error notification which is what you expect.

There're obviously many ways to avoid this. You can use something different than throwError and wrap the input value with some object for example. But then you won't be able to handle it in observer's error handler.

You can also use retry and tap to handle the error:

this.query.valueChanges
  .pipe(
    switchMap(d => (d === 'boom') ? throwError(new Error("boom")) :  of(d)),
    tap({ error: err => console.log(err) }),
    retry(),
  )
  .subscribe({
    next: d => console.log(d),
    complete: () => console.log("complete")
  })

You'd have to use tap here because the error never reaches the observers.

Your updated demo: https://stackblitz.com/edit/angular-1qfn2z?file=src/app/app.component.ts

这篇关于角度反作用形式值随管道而变化.这是一个错误吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！