Angular Error: NodeInjector: NOT_FOUND [ControlContainer]

user_11650854 0
Viewed 43435

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>
mean-stack angular mean
9 Answers

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">
user_23793310

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.

user_105623450

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

user_130898410
user_31100990

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

user_49751910
user_21936810

if you are using Modal for Ionic

Then import this

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

to the parent module of the modal.

user_46461890

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>
user_100900390

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.

user_5916560
Related