Angular Error: NodeInjector: NOT_FOUND [ControlContainer]

Question

core.js:5873 ERROR Error: NodeInjector: NOT_FOUND [ControlContainer]

Sometimes when I restart the project it runs perfectly. There are only changes in app.component.html :

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <form action="">

        <div class="form-group">
          <label for="">Username</label>
          <input type="text" name="username" class="form-control" />
        </div>
        <div class="form-group">
          <label>Password</label>
          <input type="password" class="form-control">
        </div>
        <div class="form-group">
          <label>Confirm Password</label>
          <input type="password" class="form-control">
        </div>
        <div>
          <button type="submit" class="btn btn-primary btn-block">Register</button>
        </div>
      </form>
      
    </div>
  </div>
</div>

Yes it's late, but someone will help with this comment. Stop running project and rebuild everything will work if dependency will correct — Umashankar, Nov 05 '20 at 13:12

Kenneth mwangi · Accepted Answer · 2020-04-25T18:54:40.067

In app.module.ts I add ReactiveFormsModule in my imports section. Remember to import it at the top as: import { ReactiveFormsModule} from '@angular/forms.

In your app.component.ts you have to define FormGroup instance and initialize/register it via ngOnInit method as below:

    import { FormGroup, FormControl } from '@angular/forms'; //imports
.......................................................................
    myForm:FormGroup;  
    ngOnInit(){
         this.myForm = new FormGroup({          
               'name':new FormControl(null), //note, can have up to 3 Constructor Params: default value, validators, AsyncValidators
               'email':new FormControl(null,Validators.email)

          })
    }

Then bind form to the FormGroup instance myForm:

<form [formGroup]="myForm">

Note that name and email are controls in the form that needs binding using formControlName :

<input type="text" name="name" formControlName="name">

It may be helpful to note that importing of FormGroup MUST come before FormControl or you will continue to see this error. — JakeFromSF, Aug 16 '21 at 15:01

score 14 · Answer 2 · answered May 06 '20 at 04:43

14

you have to import both, import { FormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms'; into your corresponding module.ts file. that worked for me.

answered May 06 '20 at 04:43

Theja Wijesiriwardane

173
1
7

2

For anyone else who bumps into this, I not only had to add `import {ReactiveFormsModule} from '@angular/forms';` to `app.module.ts` I also had to add it to the ts file for my form. – Grant Curell May 18 '20 at 17:14
One has to decide whether to use app.module.ts, app.component.ts and app.component.html to setup the form OR to use files representing a smaller scope like signup.module.ts, signup.page.ts and signup.page.html. As described in many of these answers, it is important to import ReactiveFormsModule, etc. into the correct module.ts file and to create the form in ngOnInit() in the correct corresponding .ts file. If you are adding a form to a single page of the app, the code needs to go in the file structure for that page. – JCollins Jan 23 '21 at 16:16
If one is not using Template Driven approach why do they need to import {FormsModule} ? – sid7747 Jun 30 '21 at 11:45
Yep, this did it for me, had to add it to `TestBed.configureTestingModule` ;) – MDMoore313 May 25 '22 at 23:16

score 8 · Answer 3 · edited Jun 28 '20 at 21:50

8

In your code formGroup is missing try this: <form [formGroup] = "">

edited Jun 28 '20 at 21:50

jaibalaji

3,159
2
15
28

answered Mar 19 '20 at 16:22

Ahmed Gabal

81
1

score 5 · Answer 4 · answered Feb 29 '20 at 07:12

5

Your question is very similar to this question and your code looks missing [formGroup] as it is mentioned in this question:

Angular 5: "No provider for ControlContainer"

If you try its answer, would that work for you?

answered Feb 29 '20 at 07:12

Yuchao Wu

383
2
8

score 4 · Answer 5 · answered Mar 24 '20 at 13:20

4

In my case, I had forgotten to put ReactiveFormsModule to the imports section in the corresponding .spec.ts file.

answered Mar 24 '20 at 13:20

karina

789
9
26

score 4 · Answer 6 · answered May 14 '20 at 20:49

4

I ran into a similar scenario.

Issue is that angular v9 didn't liked @Host() any more. Fix is removing @Host() from dependency declaration in the constructor.

https://github.com/angular/angular/issues/31539

answered May 14 '20 at 20:49

Ricardo Fornes

382
1
4
11

score 1 · Answer 7 · answered Aug 22 '20 at 04:19

1

if you are using Modal for Ionic

Then import this

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

to the parent module of the modal.

answered Aug 22 '20 at 04:19

Eres Keanu Carreon

17
1
11

Nikhil Yadav · Answer 8 · 2022-01-06T09:12:13.053

Make sure you have all the below conditions correctly configured

In app.module.ts

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [
   ReactiveFormsModule
  ],
  providers: [],
  bootstrap: []
})

In app.component.ts

userForm:FormGroup = new FormGroup({
      'username': new FormControl(null,Validators.required),
      'password': new FormControl(null,Validators.required),
      'confirm-password': new FormControl(null,Validators.required)
})

In HTML code

<form [formGroup]="userForm">
......
</form>

score 0 · Answer 9 · answered Feb 05 '21 at 03:58

I came across the same issue with Angular 9 and I already had ReactiveFormsModule and FormsModule imported.

Turns out that @Host() decorator is not working with Ivy. Only solution that helped is removing @Host() from the dependency declaration in the constructor.

Angular new Rendering engine Ivy doesn't like @Host() decorator.

Angular Error: NodeInjector: NOT_FOUND [ControlContainer]

9 Answers9

Linked