Angular 5: “No provider for ControlContainer”

Question

I have a little web app with Angular 5 and out of a sudden I am getting this strange error message in my browser console:

ncaught Error: Template parse error         


        

Answer 1

I was able to resolve this with two changes.

1) I had my component in its own module. I had to import THAT specific module into the app.module. That got me half way to the solution.

2) I also had some fields whose values were generated in the component and being displayed in the form group. Once I took those out of the form group and put them in a separate div, then I was set to go.

Answer 2

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.

Answer 3

Every time I encounter this error I make the mistake of using reactive forms and using an input named @Input formGroup in one of my own components.

Error: Using reserved word for @Input

Component

@Input()
formGroup: FormGroup;

Using it

<!-- Angular now thinks this is a form which causes the error -->
<my-own-component [formGroup]="formGroup"></my-own-component>

Solution 1: Use other word for @Input

Component

@Input()
form: FormGroup;

Using it

<!-- This works -->
<my-own-component [form]="formGroup"></my-own-component>

Solution 2: Alias the input

Component

@Input("form")
formGroup: FormGroup;

Using it

<!-- This works too -->
<my-own-component [form]="formGroup"></my-own-component>

Answer 4

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>

Answer 5

So for me it ended up being because I had put 'ReactiveFormsModule' in the exports section in one of my top level modules.

Answer 6

For me (and for those creating a TAB application), it turns out I had to add the imports for FormsModule and ReactiveFormsModule in the tab1.module.ts. I have found no other answer for this type of senario so I thought I would share it.