Cannot get an Angular reactive forms AsyncValidatorFn to debounce and set control error

I have an Angular reactive form where a form group has an expensive validation, so I wanted to try and debounce the call to the actual validation.

I found many other posts on this, for example here, and also this running example which seemed to be doing what I want.

However, when I use the above, it just never sets the errors on the control.

I forked the above example here, but also included trying to display the actual error...

<div>{{userGroup.errors ? userGroup.errors[isUserIdFree] : "none" }}</div>
<div>{{getError(userGroup.errors)}}</div>


Where I also pass the errors object to getError.

As in my application, errors is just never set.

I seem to get the same in anything method where I try to have a debounce, the errors is just never set.

Why is this, and is it really possible to debounce the async validation?

Continue reading...