This is my first time trying an async form validator. It is attached at to my form’s asyncValidators, it’s firing appropriately, the correct value (object or null) is being returned … but the form remains invalid and the state stuck in PENDING. The errors property on all formgroups and formcontrols is null.

If I remove the async validator, the issue goes away, so it is 100% the validator.

This is an old component that someone injected ChangeDetectorRef into, but is not an onPush component. I have tried using the cd to mark for check and explicitly detectChanges().

Can someone tell me what I’m doing wrong?

Validator:

private validateV2Applications$(): AsyncValidatorFn {
    return (): Observable<ValidationErrors> => {
      console.log("called");
      return this.applyChargesService.rowInfo$.pipe(
        map((rowInfo) => {
          console.log('mapped');
          if (this.useApplyToInstallments && rowInfo.invalidRows.length > 0) {
            console.log('async validator is invalid!');
            return { applicationErrors: 'there are application errors' };
          }

          return null;
        }),
      );
    };
  }

Form creation code (wasn’t sure how to add as part of formBuilder so adding after-the-fact):

// fb = FormBuilder
this.creditForm = this.fb.group(
  { /* form controls */ },
  {
    validator: [this.validatecredit(), this.validateApplicationTotal()],
  },
);

this.creditForm.setAsyncValidators([this.validateV2Applications$()]);

EDIT for @naren murali, the code for rowInfo$. The rowInfo$ observable works perfectly fine for every other use case. This code is located in a service, and another component pushes rowInfo to listeners. That “other component” is loaded and pushing values, which I can verify with the log statements.

private rowInfoSource = new BehaviorSubject<ApplyChargesRowInfo>({
  selectedRows: [],
  invalidRows: [],
});
public rowInfo$ = this.rowInfoSource.asObservable();

public setRowInfo(data: ApplyChargesRowInfo): void {
  this.rowInfoSource.next(data);
}