FormControl.errorsSubject is undefined when using asyncValidator

[ltoenjes]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When instantiating a FormGroup with asyncValidators an error occurs.

ERROR TypeError: Cannot read property 'next' of undefined at FormControl.setErrors (ngneat-reactive-forms.js:368) at SafeSubscriber._next (forms.js:3241) at SafeSubscriber.__tryOrUnsub (Subscriber.js:183) at SafeSubscriber.next (Subscriber.js:122) at Subscriber._next (Subscriber.js:72) at Subscriber.next (Subscriber.js:49) at Observable._subscribe (subscribeToArray.js:3) at Observable._trySubscribe (Observable.js:42) at Observable.subscribe (Observable.js:28) at FormControl._runAsyncValidator (forms.js:3236)

Expected behavior

Should work. Does so when using default angular FormBuilder.

Minimal reproduction of the problem with instructions

Created a form group with some sync and some async validators (which are fetching stuff from the API)

Environment

Angular version: 11.2.0


Browser:
- [x] Chrome (desktop) version 91.0.4472.77
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 12.16.1  
- Platform:   Windows

Others:

[NetanelBasal]

Can you please reproduce on stackblitz?

[ltoenjes]

Will do.

[C0ZEN]

FYI: I encountered the same issue @NetanelBasal.
I can reproduce it with a form that has one form control and one async validator (in an array).
The async validator in this case is returning an observable which is instantly resolved with a of(null).
As a workaround, using a delay is just enough to not see the error in the console.
I guess the errorsSubject is optional during a little time frame.

Note that even if an error is thrown, it's not breaking the app, so it's just annoying, nothing else.

The error is thrown from this source:

setErrors(errors, opts = {}) {
  this.errorsSubject.next(errors);
  return super.setErrors(errors, opts);
}

The errorsSubject is undefined.

[NetanelBasal]

Can you please reproduce on stackblitz?

[C0ZEN]

@NetanelBasal https://stackblitz.com/edit/ngneat-reactive-forms-error-issue?devtoolsheight=33&file=src/app/app.component.html

[C0ZEN]

I added it to codesandbox which I found way better and I have the same issue.
https://codesandbox.io/embed/github/C0ZEN/ngneat-reactive-forms-error-issue-cs/tree/main/?autoresize=1&expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark

[C0ZEN]

Actually, since your custom control is using the super from the extended Angular class, the latest will call the setErrors method before continuing the rest of the constructor which set the subject.
Kind of easy to come up with a fast fix, I can provide a PR and you will be the judge over the quality ;)
BTW: I tried to reproduce the issue through some tests but didn't come up with a reproduction :/

[C0ZEN]

Tested and I can confirm it's good.
Thank you for the fast reactivity.