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';
...

Answer 1

import FormsModule in addition to ReactiveFormsModule

Answer 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 { }

Answer 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">

Answer 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
  ],

Answer 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.