Angular Reactive Forms 表单控件 valueChanges 停止侦听错误

Question

我有一个注册表单，我在表单控件上使用valueChanges 侦听器，并调用 http 服务，如果该值已经存在，则该服务会发布到服务器，例如电子邮件和用户名。如果服务器上已经存在该值，则返回状态码 403。我通过向用户显示消息来捕获并处理此错误，但我的问题是valueChanges 侦听器停止侦听，因此如果我只是更改表单值，则此代码是空闲的。即使在错误发生后，我可以让听众继续吗？我应该以另一种方式处理吗？谢谢。

这是监听器代码：

    this.watchEmailSub = this.registerForm.controls.email.valueChanges.pipe(
      debounceTime(500),
      distinctUntilChanged(),
      switchMap(v =>
        this.regService.checkRegistrationValueExists('Email', v, this.registerForm.controls.email.valid)
      )
    ).subscribe(returnValue => {
        this.registerEmailError = null;
        console.log('returnValue.message = ', returnValue.message);
      },
      (error) => {
        console.warn('Error = ', error);
        this.registerEmailError = 'This email already exists';
      }
    );

HTTP 服务代码：

  checkRegistrationValueExists(type: string, value: string, formControlValid: boolean): Observable<any> {
    // Code removed here that defines checkValueExistsUrl & checkValueExistsBody
    if (formControlValid) {
      return this.http.post<string>(checkValueExistsUrl, checkValueExistsBody);
    }
    return of({ message: `${type} invalid` });
  }

Answer 1

您可以使用 catchError 并吞下错误来防止这种情况发生：

this.watchEmailSub = this.registerForm.controls.email.valueChanges.pipe(
  debounceTime(500),
  distinctUntilChanged(),
  switchMap(v =>
    this.regService.checkRegistrationValueExists('Email', v, this.registerForm.controls.email.valid).pipe(
      catchError(error => {
        this.registerEmailError = 'This email already exists';
        return EMPTY;
      })
    )
  )
).subscribe(returnValue => {
    this.registerEmailError = null;
    console.log('returnValue.message = ', returnValue.message);
  },
  (error) => {
    console.warn('shouldn't be here');
  }
);

不应在此处抛出 IMO 403。 403 在任何情况下都是不合适的，因为 403 表示未经授权查看此信息，如果有任何错误，它将是 400。除此之外，这是一个专门检查可用性的 API 端点。错误代码表示出现问题。这里没有出错，它检查并成功返回了您的答案，是它存在或不它不存在。