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 the ReactiveFormsModule 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.