Angular 5: "No provider for ControlContainer"
The ControlContainer
is a abstract class which is extended by the AbstractFormGroupDirective
inside the ReactiveFormsModule
.
The error is thrown if you're using the ReactiveFormsModule
and a <form>
-element without a FormGroup
bound to it via [formGroup]="myForm"
.
To fix this error you have to create a FormGroup
and bind it to your form:
<form class="container" [formGroup]="myForm" (ngSubmit)="update()">
Also make sure you have both the
FormsModule
and theReactiveFormsModule
added to your module imports.
For Me its turns out that i imported just ReactiveFormsModule but not FormsModule. you need to import both.
Turns out that the error had nothing to do with form
not being bound to a formGroup
, but me naming the receiving variable also formGroup
. That confuses the heck out of Angular.
Just renaming this variable solves the issue. That is okay now:
<form class="container" (ngSubmit)="update()">
<app-form-group [fg]="additionalInformation"></app-form-group>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
This issue happen when you import ReactiveFormsModule
and missing FormsModule
in the module. So we need to import it to the module that your component belong to
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
@NgModule({
declarations: [
...
],
imports: [
...
ReactiveFormsModule,
FormsModule
]
})
export class XXXModule { }
In case someone is still having this error while using the Angular CLI, i was only importing the ReactiveFormsModule
, then i imported and registered the FormsModule
to fix the error. I was serving the app with ng serve
when i made changes to the module class and i was still having the error even after importing and registered the FormsModule
. To fix the error i had to stop serving and start again in order to recompile the module class.