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> <div> <div> <form action=""> <div> <label for="">Username</label> <input type="text" name="username" /> </div> <div> <label>Password</label> <input type="password"> </div> <div> <label>Confirm Password</label> <input type="password"> </div> <div> <button type="submit">Register</button> </div> </form> </div> </div>
</div>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">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.
In your code formGroup is missing try this:<form [formGroup] = "">
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?
In my case, I had forgotten to put ReactiveFormsModule to the imports section in the corresponding .spec.ts file.
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.
if you are using Modal for Ionic
Then import this
import { FormGroup, FormControl } from '@angular/forms'; //imports
to the parent module of the modal.
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>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.
