No provider for ControlContainer - Angular 5

Question

I am converting a purchased, third-party template into an Angular 5 app, and just ran into an error. I am very new to Angular 5 (I know AngularJS well however) and don't understand what it's trying to tell me? It seems to be related to a button which shows/hides the top navbar.

Error Message (from browser):

Error: Template parse errors:
No provider for ControlContainer ("imalize-styl-2 btn btn-primary " (click)="toggleNavigation()"><i class="fa fa-bars"></i> </a>
      [ERROR ->]<form role="search" class="navbar-form-custom" method="post" action="#">
        <div class="form-gro"): ng:///AppModule/TopNavigationNavbarComponent.html@4:6

component.html:

<div class="row border-bottom">
  <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
    <div class="navbar-header">
      <a class="minimalize-styl-2 btn btn-primary " (click)="toggleNavigation()"><i class="fa fa-bars"></i> </a>
      <form role="search" class="navbar-form-custom" method="post" action="#">
        <div class="form-group">
          <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
        </div>
      </form>
    </div>
    <ul class="nav navbar-top-links navbar-right">
      <li>
        <a href="#">
          <i class="fa fa-sign-out"></i> Log out
        </a>
      </li>
    </ul>
  </nav>
</div>

component.ts

import { Component, OnInit } from '@angular/core';
import { smoothlyMenu } from '../../../app.helpers';

declare var jQuery: any;

@Component({
  selector: 'app-top-navigation-navbar',
  templateUrl: './top-navigation-navbar.component.html',
  styleUrls: ['./top-navigation-navbar.component.less']
})
export class TopNavigationNavbarComponent implements OnInit {

  toggleNavigation(): void {
    jQuery('body').toggleClass('mini-navbar');
    smoothlyMenu();
  }

  constructor() { }

  ngOnInit() {
  }

}

app.module.ts (this seems to be something a mentioned a lot when I google this, however it is not the Form throwing the error.)

...
import { ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
...

Solution 1

import FormsModule in addition to ReactiveFormsModule

Solution 2

Import FormsModule and ReactiveFormsModule in views.module.ts(custome module file) file works for me :

views.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    ...
  ],
  declarations: [
    ...
  ],
  exports: [
   ...
  ],
  schemas: [NO_ERRORS_SCHEMA]
})
export class ViewsModule { }

Solution 3

I'm not sure why the error seems to be pointing to the anchor tag outside of the form element, but it was the form element that was causing the error. Adding FormGroup to the form fixed the problem.

<form role="search" class="navbar-form-custom" [formGroup]="form">

Solution 4

Edit the file "app.module.ts"; change the following instruction:

import { ReactiveFormsModule } from '@angular/forms';

with the following:

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

Change the following piece of code:

  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],

with the following:

  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule
  ],

Solution 5

If you are trying to display plain HTML form from an Angular component, use ngNoForm in <form> tag like this.

<form ngNoForm>
...
</form>

This should prevent Angular from throwing Control Container Error.

View more solutions

Comments

[Manu Chadha]

I faced same issue. I have 2 forms in two separate components. I converted only 1 in Angular and got this error. I have to convert both the forms to Angular style to make the app work again

[emirhosseini]

This is not making a difference for me. Still getting the error

[AC101]

You may have to restart the server for this to work.

[pzaenger]

Why component.spec.ts?

[Julian Egner]

@pzaenger when the problem is in a test

[coder3]

Works! You have to restart the server for it to take effect.

[Sarah]

Omfg, this is it. Thank you so much

[HuserB1989]

import FormsModule in addition to ReactiveFormsModule - this solved my problem, thanks