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

除了ReactiveFormsModule FormsModule ，还导入FormsModule

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.

Answer 6

After spending 2 hours on it, i realised that when we import FormModule in app.module as well as in child.module then this kind of error occur. Simpley remove FormModule from child.module then error will be resolved :)

Answer 7

Add this line to your component.spec.ts:

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

imports: [
  RouterTestingModule,
  FormsModule
],

Answer 8

I had this issue in Angular(Jasmin) Test cases.

I have accidentally added angular form modules in the import of my Unit Test at beforeEach, one is FormModule (by angular) and other one is Custom FormModule.

I need only Custom FormModule, once I removed the FormModule (by angular) the issue resolved

beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [CustomTranslateModule.forRoot(),
    CustomRightPanelModule,
    CustomListModule,
    CustomInputTextModule,
    CustomMasterPageModule,
    CustomFormModule,
    FormModule, // this is unnecessary 
    .....................
    .....................