Angular 自定义异步验证器未显示错误

Question

当我实际进行异步调用时，我的异步验证器不工作（但当我用 Observable.of(result) 模拟它时工作。html 看起来像这样：

   <div class="form-group">
          <label for="emailAddress" class="control-label">Email</label>
          <input type="email"
                 id="emailAddress"
                 class="form-control"
                 [(ngModel)]="parent.EmailAddress"
                 name="emailAddress"
                 [ngModelOptions]="{updateOn: 'blur'}"
                 appDuplicateEmailValidator
                 #emailAddress = "ngModel">
        </div>

有问题的验证器是 appDuplicateEmailValidator。

验证码如下所示：

  public validate(control: AbstractControl): Observable<ValidationErrors | null> {
    // return observableOf({ 'isDuplicateEmail': true });

    return this.checkForDupeUserAndGetValidationState(emailAddress);
  }

  private checkForDupeUserAndGetValidationState(emailAddress): Observable<ValidationErrors | null> {
    const validationStateObs: Observable<ValidationErrors | null> = new Observable(observer => {
      this.adminService.getUser(emailAddress).subscribe(
        (res: any) => {
          const validationState = !!res ? observableOf({ 'isDuplicateEmail': true }) : null;
          console.log('Observer next, validation state: ', validationState); // Gets correct val state
          observer.next(validationState);
          console.log('Is it hitting this'); // Gets hit
        }, (err) => {
          observer.next(null);
        });
    });

重要的一点是，当我取消注释 // return observableOf({ 'isDuplicateEmail': true }); 时，一切都按预期进行。但是你看到上面代码的方式，它不起作用，即使 observable 返回正确的值（记录它使用过的调试器）。 "it doesn't work" 我的意思是表单控件永远不会进入错误状态，如下所示：

<pre>IS INVALID: {{emailAddress.invalid}}</pre>
<pre>ERRORS: {{emailAddress.errors | json}}</pre>

为什么以及如何解决？

Answer 1

observableOf({ 'isDuplicateEmail': true }) 返回一个 Observable 对吗？你应该把普通方法放在 observer.next() 而不是可观察的方法中。

尝试删除 observableOf 并对其进行测试。它应该是这样的：

  private checkForDupeUserAndGetValidationState(emailAddress): Observable<ValidationErrors | null> {
    const validationStateObs: Observable<ValidationErrors | null> = new Observable(observer => {
      this.adminService.getUser(emailAddress).subscribe(
        (res: any) => {
          const validationState = !!res ? { 'isDuplicateEmail': true } : null;
          console.log('Observer next, validation state: ', validationState); // Gets correct val state
          observer.next(validationState);
          console.log('Is it hitting this'); // Gets hit
        }, (err) => {
          observer.next(null);
        });
    });

我希望它能这样工作

Answer 2

问题是，为什么您先订阅然后 return 又是新的 Observable？我认为你应该能够做到这一点：

private checkForDupeUserAndGetValidationState(emailAddress): Observable<ValidationErrors | null> {
    return this.adminService.getUser(emailAddress).pipe(map(
      (res: any) => {
        return !!res ? { 'isDuplicateEmail': true } : null;
      }, catchError(err => {
        return of(null);
      })));
  }

这样您将让异步验证器本身为您处理订阅...

希望这对您有所帮助...

Answer 3

您有 3 个问题。 1. 您实际上需要 return 您的 observable 2. 您正在通过观察者发送一个 observable 而不是一个值 3. observable 需要完成。

你可以这样做：

  private checkForDupeUserAndGetValidationState(emailAddress): Observable<ValidationErrors | null> {
    const validationStateObs: Observable<ValidationErrors | null> = new Observable(observer => {
      this.adminService.getUser(emailAddress).subscribe(
        (res: any) => {
          const validationState = !!res ? { 'isDuplicateEmail': true } : null; // just send the value
          observer.next(validationState);
          observer.complete(); //complete here
        }, (err) => {
          observer.next(null);
          observer.complete(); // and complete here
        });
    });
    return validationStateObs; // return it here
  }

但更简单、更清晰的方法是 return 来自您的服务的响应并使用运算符而不是创建可观察对象并在其中嵌套订阅..

  private checkForDupeUserAndGetValidationState(emailAddress): Observable<ValidationErrors | null> {
    return this.adminService.getUser(emailAddress).pipe(
      map((res: any) => !!res ? { 'isDuplicateEmail': true } : null),
      catchError((err) => observableOf(null))
    )
  }

http observables 在一次发射后自然完成，因此您无需担心完成或您拥有的任何其他复杂逻辑。

Angular 自定义异步验证器未显示错误

Angular Custom Async Validator Not Showing Error

angular

observable

angular-custom-validators