Angular7: NullInjectorError: No provider for FormGroup

Question

I'm getting really fustrated because I have no idea what's happening. Everything worked correctly this morning right before some changes I made to merge together 2 forms in a ReactiveForm and now I get the following error in the browser:

Error: StaticInjectorError(AppModule)[FormGroup]:
StaticInjectorError(Platform: core)[FormGroup]: NullInjectorError: No provider for FormGroup! Error: StaticInjectorError(AppModule)[FormGroup]:
StaticInjectorError(Platform: core)[FormGroup]: NullInjectorError: No provider for FormGroup!

I'm importing FormsModule and ReactiveFormsModule in my app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
[...]
@NgModule({
  declarations: [
    AppComponent,
    CustomersComponent,
    HeaderComponent,
    CustomersListComponent,
    CustomerEditComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    ...
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And then the FormGroup in my component:

import { FormGroup, FormControl, Validators } from '@angular/forms';
[...]

And declaring a new FormGroup afterwards in the component. I tried to reinstall the @angular/forms package with npm but I'm still getting the error... I've seen some similar questions asked but from what I could tell, it was related with the testing environment. If you have any idea, thanks in advance.

The component is "CustomerEditComponent" and is located in src/app/customers/customer-edit — Martin Carre, May 06 '19 at 10:53
Can you please create demo in https://stackblitz.com/ so I can take a look at it ? — , May 06 '19 at 10:55

score 15 · Accepted Answer · edited Apr 21 '20 at 09:20

15

Don't inject FormGroup into the constructor of the component.

This it's NOT ok:

constructor(private fb:FormBuilder,  private ts:FormGroup)

This its ok:

constructor(private fb:FormBuilder)

edited Apr 21 '20 at 09:20

Tomislav Stankovic

3,080
17
35
42

answered Apr 21 '20 at 07:37

Frank

403
3
10

Thank you¡¡¡¡ ;) – Frank Apr 22 '20 at 12:36
1

`ts!: FormGroup;` should be declared in your module, outside of the constructor... – Jonathan Mar 28 '21 at 21:49
why the formGroup should be declared outside the constructure but it's ok with FormBuilder? – Natalia Duran Jun 28 '21 at 18:27

score 0 · Answer 2 · answered May 06 '19 at 18:16

I would have to see your ts file where the form is being built. But it sounds like you are using Reactive Forms and have not imported everything needed. ReactiveForms requires not only:

 import { FormGroup, FormControl, Validators } from '@angular/forms';

but also be sure to import "FormBuilder" in that same import statement:

import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

also, in your constructor you should have similar to the following :

constructor(private fb: FormBuilder) {}

and the form should have the form builder instantiating the form:

productForm = this.fb.group({})

If that doesn't fix the issue, I would need to see more to help.

Neha Prajapati · Answer 3 · 2021-06-28T09:46:05.137

0

This problem happens when the input is not a form control, which is not related to any Angular version or Form Builder.

To solve this apply either of the below solutions,

form: FormGroup | any
add "strictPropertyInitialization": false, in tsconfig.json file .

It got resolved for me like this :)

edited Jun 28 '21 at 09:46

answered Jun 28 '21 at 08:33

Neha Prajapati

111
2
3

Angular7: NullInjectorError: No provider for FormGroup

3 Answers3

Linked