dialog Cannot use FormBuilder as DI in rendered Component.

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

Cannot use FormBuilder in rendered component via DialogService. Getting an Error each time FormBuilder class is used in DI in component I would like to render via DialogService.

RROR NullInjectorError: R3InjectorError(AppModule)[FormBuilder -> FormBuilder -> FormBuilder]: 
  NullInjectorError: No provider for FormBuilder!
    at NullInjector.get (https://localhost:4200/vendor.js:61731:27)
    at R3Injector.get (https://localhost:4200/vendor.js:61898:33)
    at R3Injector.get (https://localhost:4200/vendor.js:61898:33)
    at R3Injector.get (https://localhost:4200/vendor.js:61898:33)
    at NgModuleRef$1.get (https://localhost:4200/vendor.js:75962:33)
    at Object.get (https://localhost:4200/vendor.js:75676:35)
    at lookupTokenUsingModuleInjector (https://localhost:4200/vendor.js:54013:39)
    at getOrCreateInjectable (https://localhost:4200/vendor.js:54125:12)
    at Module.ɵɵdirectiveInject (https://localhost:4200/vendor.js:65336:12)
    at NodeInjectorFactory.AddApplicationDepartmentComponent_Factory [as factory] (https://localhost:4200/features-main-main-module.js:696:336)

Expected behavior

Should render Dialog with ReactiveForm in it.

Minimal reproduction of the problem with instructions

Create a component to render with DialogService. Add FormBuilder in DI in this component. Try to render it.

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

I would like to be able to create a Dialog with ReactiveForms in it.

Environment


Angular CLI: 11.2.1
Node: 14.15.1
OS: darwin x64

Angular: 11.2.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Ivy Workspace: 

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.7
@angular-devkit/build-angular   0.1102.1
@angular-devkit/core            11.2.1
@angular-devkit/schematics      0.7.5
@angular/cli                    11.2.1
@nguniversal/builders           11.2.0
@nguniversal/express-engine     11.2.0
@schematics/angular             11.2.1
@schematics/update              0.1102.1
rxjs                            6.6.3
typescript                      4.1.5



Browser:
- [x] Chrome (desktop) version 88.0.4324.192 (x86_64)
- [ ] 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: v14.15.1
- Platform:  Mac

Others:

Mar 03 '21 10:03 fstodulski

@fstodulski can you submit a minimal reproduction? I am unable to reproduce.

Mar 11 '21 15:03 rhutchison

I have the same issue. Disappear issue if we add two modules in app module, but it's disgusting((

Apr 22 '21 18:04 Maksiemens

✔️ I don't have issues injecting FormBuilder - works as expected (not as if I'd use that Form builder - as Angular template based approach just lacks a good validation component and some extra code around to achieve great and flexible validation without data pull-push codes)...

Here's something that I put together (and what the Angular team should have) to dynamically render errors from an error function (or from API result) which uses just an array of error objects... angular - custom 3rd party validation - test page