Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Reactive forms, async validator issue with delayed observable
See original GitHub issueWhich @angular/* package(s) are the source of the bug?
forms
Is this a regression?
No
Description
Everything can found here :
https://stackblitz.com/edit/angular-ivy-paseta?file=src/app/app.component.ts
Explanation :
When using an async validator with a delayed observable, in a reactive form, with the change detection set to OnPush, the UI does not get updated after the validator has ended its call.
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/angular-ivy-paseta?file=src/app/app.component.ts
Please provide the exception or error you saw
No exception, no error, just the UI not updating correctly
Please provide the environment you discovered this bug in (run ng version)
All can be found on the provided stackblitz
Anything else?
Screenshots for the lazy ones out there :
First blur :
Second blur :
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:5
Top Results From Across the Web
How to add debounce time to an async validator in angular 2?
Using timer and Angular's async validator behavior we have recreated RxJS ... Keep it simple: no timeout, no delay, no custom Observable
Read more >Using Custom Async Validators in Angular Reactive Forms
It returns an observable with a 5 seconds delay to simulate a very slow API call. Now, we can create our Async Validator...
Read more >Angular forms validation. Part III. Async Validators gotchas
I. The Async Validation is completed but there is no error message at the UI... Yep, it is a really common problem. There...
Read more >How to add Async Validation to Angular Reactive Forms
Asynchronous validators, on the other hand, do not return the validation result immediately. They instead give back an Observable of the ...
Read more >How to Add Async Validators to an Angular Reactive Form
Occasionally, you may want to validate form input against data that is available asynchronous source i.e. a HTTP backend.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Hello,
I know this is the issue. What I am saying is that it should NOT be an issue. I am running inside Angular’s context, which is supposed to be “synced” with the UI. Hence, updating the validation state of a form control should update the UI accordingly.
As said, I know how to work around this issue, which I have done (by triggering change detection myself, indeed). What I am asking is to NOT use a workaround, because of the aformentioned reason.
Hello @Maryannah , I think your problem might be in OnPush change detection strategy. During OnPush, there is no change detection performed once your async error is resolved.
Would it be okay for you to remove row
changeDetection: ChangeDetectionStrategy.OnPush,?Another solution (more complex) would be to manually trigger detection, once your asyncValidator is done with validation.