Error when trying to merge validators

[tafax]

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 invoking mergeValidators an error is thrown.

Expected behavior

The validators are correctly merged without errors.

Minimal reproduction of the problem with instructions

Given a form group created with the typed FormBuilder:

const builder = new FormBuilder();
const group = builder.group<{ title: string }>({
   title: [ '', Validators.required ],
});

when validators are merged

group.mergeValidators(
   (control: NgAbstractControl | AbstractControl<never, never>) => {}
);

then this error is thrown

core.js:6157 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'validate' of null
TypeError: Cannot read property 'validate' of null
    at isValidatorFn (forms.js:754)
    at forms.js:766
    at Array.map (<anonymous>)
    at normalizeValidators (forms.js:765)
    at composeValidators (forms.js:776)
    at coerceToValidator (forms.js:2756)
    at FormGroup.setValidators (forms.js:2951)
    at FormGroup.setValidators (ngneat-reactive-forms.js:510)
    at mergeControlValidators (ngneat-reactive-forms.js:96)
    at FormGroup.mergeValidators (ngneat-reactive-forms.js:481)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:28522)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

Minimal troubleshooting

It seems related to the fact that the group has a null validator. The code that applies a merge doesn't skip it and the following one will use an array like [null, ...]. Therefore, a deeper investigation is needed 😄

What is the motivation / use case for changing the behavior?

Environment

Angular version: 11.2.3


Browser:
- [X] Brave Version 1.23.71 Chromium: 90.0.4430.72 (Official Build) (x86_64)
- [ ] Chrome (desktop) version XX
- [ ] 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: 14.15.1
- Platform: Mac

Others:

[NetanelBasal]

Please reproduce it on stackblitz.

[tafax]

@NetanelBasal Sure, but do you have a functioning template I can use? If I try to set up stackblitz I get ngcc failed to run on @ngneat/[email protected].

[tafax]

@NetanelBasal Any news on this?

[NetanelBasal]

@tafax can you try v1.7.3?

[tafax]

@NetanelBasal Unfortunately, It is still there for me.

[NetanelBasal]

Can you reproduce on stackblitz, please?

[tafax]

@NetanelBasal I still get ngcc failed to run on @ngneat/[email protected]. on stackblitz.

[muuvmuuv]

Having the same issue. Somehow, always a null is in the validator array.

const control = new FormControl<string>("", [])

I am on 1.7.3 as well.

[NetanelBasal]

Can you reproduce on stackblitz, please?

[muuvmuuv]

@NetanelBasal sure but StackBlitz says "cannot compile reactive-forms"... I will try ng-repl

https://stackblitz.com/edit/reactive-formsissues87

[muuvmuuv]

@NetanelBasal sorry to ping again, I got a working repl here: https://codesandbox.io/s/reactive-forms-issue-87-ehccj?file=/src/app/app.component.ts

(OT: why is StackBlitz so hyped, Codesandbox works way better IMO and has great VS Code features)

[NetanelBasal]

I can check it, but this method is redundant. In v12 they added the addValidator method.

[NetanelBasal]

Fixed and deprecated.