Problem with NgxValidate without form group #3722

LW created 2 years ago

ABP Framework version: v5.1.3
UI type: Angular
DB provider: EF Core
Tiered (MVC) or Identity Server Separated (Angular): yes
Exception message and stack trace: core.mjs:6461 ERROR NullInjectorError: R3InjectorError(ConsumptionForecastModule)[ValidationGroupDirective -> ValidationGroupDirective -> ValidationGroupDirective -> ValidationGroupDirective -> ValidationGroupDirective]: NullInjectorError: No provider for ValidationGroupDirective! at NullInjector.get (core.mjs:11095:1) at R3Injector.get (core.mjs:11262:1) at R3Injector.get (core.mjs:11262:1) at R3Injector.get (core.mjs:11262:1) at NgModuleRef.get (core.mjs:21807:1) at R3Injector.get (core.mjs:11262:1) at NgModuleRef.get (core.mjs:21807:1) at R3Injector.get (core.mjs:11262:1) at NgModuleRef.get (core.mjs:21807:1) at Object.get (core.mjs:21484:1) defaultErrorLogger @ core.mjs:6461 handleError @ core.mjs:6508 (anonymous) @ core.mjs:26428 invoke @ zone.js:372 run @ zone.js:134 runOutsideAngular @ core.mjs:25356 tick @ core.mjs:26428 (anonymous) @ core.mjs:26273 invoke @ zone.js:372 onInvoke @ core.mjs:25457 invoke @ zone.js:371 run @ zone.js:134 run @ core.mjs:25311 next @ core.mjs:26272 __tryOrUnsub @ Subscriber.js:183 next @ Subscriber.js:122 _next @ Subscriber.js:72 next @ Subscriber.js:49 next @ Subject.js:39 emit @ core.mjs:22402 checkStable @ core.mjs:25379 onLeave @ core.mjs:25507 onInvokeTask @ core.mjs:25451 invokeTask @ zone.js:405 runTask @ zone.js:178 invokeTask @ zone.js:487 invokeTask @ zone.js:1648 globalCallback @ zone.js:1679 globalZoneAwareCallback @ zone.js:1712

We have an issue with NgxValidateCoreModule that emerges after it is imported to a module that has a component in which we have the following: The component is a view that has KendoTreeList in which we use kendoTreeListCellTemplate to be able to render our own custom FormControl of choice to its table cells. Kendo rows/cells have “edit mode” which means Kendo renders the form control with the form group when an editable cell or whole row is clicked. There is kendoTreeListEditTemplate for the edit mode content, but in our case, we have a custom form control that has two functionalities in one so we need to use kendoTreeListCellTemplate. This means that the content (form control) is there 100% of the time, not only in the cell’s edit mode like things are with kendo’s own editable cells. The edit mode means that when the user clicks a cell in the tree list table, it transforms to a form control with a form group. So, with the cell template with our custom form control being rendered there straight away when initing the KendoTreeList and it’s there without any surrounding form group. The control is given to it in the template definition via [formControl] directive from the the collection of form groups that represent the tree list table rows (e.g. this.formGroups[rowIndex].controls[col.field]). When we import the NgxValidateCoreModule, the following error is given <customCellTemplateWithOurFormControlCount> times:

core.mjs:6461 ERROR NullInjectorError: R3InjectorError(ConsumptionForecastModule)[ValidationGroupDirective -> ValidationGroupDirective -> ValidationGroupDirective -> ValidationGroupDirective -> ValidationGroupDirective]:
  NullInjectorError: No provider for ValidationGroupDirective!
    at NullInjector.get (core.mjs:11095:1)
    at R3Injector.get (core.mjs:11262:1)
    at R3Injector.get (core.mjs:11262:1)
    at R3Injector.get (core.mjs:11262:1)
    at NgModuleRef.get (core.mjs:21807:1)
    at R3Injector.get (core.mjs:11262:1)
    at NgModuleRef.get (core.mjs:21807:1)
    at R3Injector.get (core.mjs:11262:1)
    at NgModuleRef.get (core.mjs:21807:1)
    at Object.get (core.mjs:21484:1)
defaultErrorLogger @ core.mjs:6461
handleError @ core.mjs:6508
(anonymous) @ core.mjs:26428
invoke @ zone.js:372
run @ zone.js:134
runOutsideAngular @ core.mjs:25356
tick @ core.mjs:26428
(anonymous) @ core.mjs:26273
invoke @ zone.js:372
onInvoke @ core.mjs:25457
invoke @ zone.js:371
run @ zone.js:134
run @ core.mjs:25311
next @ core.mjs:26272
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.mjs:22402
checkStable @ core.mjs:25379
onLeave @ core.mjs:25507
onInvokeTask @ core.mjs:25451
invokeTask @ zone.js:405
runTask @ zone.js:178
invokeTask @ zone.js:487
invokeTask @ zone.js:1648
globalCallback @ zone.js:1679
globalZoneAwareCallback @ zone.js:1712

So the questions are:

Is this a bug that NgxValidate requires a form group wrapper for form controls or am I missing something? Isn’t it fully legit to have form controls without a surrounding form group to begin with?
If this is fully intended and avoidable, how to fix this issue for our use case and ignore the required formGroup?

2 Answer(s)