Async Validator Causes FormControl's Status to Stuck at PENDING

Which @angular/* package(s) are the source of the bug?

Don’t known / other

Is this a regression?

Yes

Description

This issue seems to have happened in 2016 as well. But the bug is still there. (check the other bug report #13200)

The problem occurs when I have an autocomplete and an input working to have user select an item from a list. I filter my list according to user’s input inside the input element and then redirect results to the autoComplete element. So far so good but as soon as I need an asyncValidator, I cannot get it to work as expected. formControl status gets stuck at PENDING everytime even though filter and asyncValidator functions return values.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-7qamtz-wkhl7t?file=src/app/autocomplete-auto-active-first-option-example.html

Please provide the exception or error you saw

`FormControl` status gets stuck at `PENDING` and doesn't show the error that is returned from the `asyncValidator`.

Please provide the environment you discovered this bug in (run `ng version`)

Angular CLI: 15.0.4
Node: 16.14.2
Package Manager: npm 7.17.0
OS: linux x64

Angular: 15.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1500.4
@angular-devkit/build-angular      15.0.4
@angular-devkit/core               15.0.4
@angular-devkit/schematics         15.0.4
@angular/cdk                       15.0.3
@angular/material                  15.0.3
@angular/material-moment-adapter   15.0.3
@schematics/angular                15.0.4
rxjs                               7.4.0
typescript                         4.8.4

Anything else?

No response

Issue Analytics

State:
Created 9 months ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

JeanMechecommented, Dec 23, 2022

something like

    const ctrl = new FormControl();
    const statusChanges$ = merge(ctrl.statusChanges, timer(0, 500)).pipe(
      map(() => ctrl.status),
      distinctUntilChanged()
    );

0reactions

JeanMechecommented, Dec 23, 2022

Ok I see, this has nothing to do with #41519. Good catch.