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

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

1 个答案: