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 端点。错误代码表示出现问题。这里没有任何问题，它检查并成功返回了您的答案，是的，它存在或不存在。