Angular form async validator firing but not updating form validity

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$()]);

Continue reading...