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

score 86 · Answer 1 · edited Jun 01 '19 at 03:24

86

import FormsModule in addition to ReactiveFormsModule

edited Jun 01 '19 at 03:24

codejockie

9,020
4
40
46

answered Jun 07 '18 at 06:30

blazehub

1,880
19
25

This is not making a difference for me. Still getting the error – emirhosseini Feb 21 '19 at 22:50
17

You may have to restart the server for this to work. – AC101 Mar 24 '20 at 03:28
`import FormsModule in addition to ReactiveFormsModule` - this solved my problem, thanks – HuserB1989 Aug 04 '21 at 13:11

Govind Samrow · Answer 2 · 2019-06-03T03:50:18.260

28

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

edited Jun 03 '19 at 03:50

answered Oct 10 '18 at 10:27

Govind Samrow

9,981
13
53
90

1

Works! You have to restart the server for it to take effect. – coder3 Aug 30 '20 at 04:47

score 22 · Answer 3 · answered Jan 11 '18 at 19:22

22

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

answered Jan 11 '18 at 19:22

Todd Davis

5,855
10
53
89

7

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 – Manu Chadha Feb 08 '18 at 16:56
Omfg, this is it. Thank you so much – Sarah Sep 27 '20 at 22:18

score 9 · Answer 4 · answered Jan 08 '20 at 12:53

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

score 7 · Answer 5 · answered May 29 '20 at 06:56

7

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.

answered May 29 '20 at 06:56

Vibhor Dube

4,173
1
22
32

score 3 · Answer 6 · answered Jun 11 '20 at 13:35

3

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 :)

answered Jun 11 '20 at 13:35

taniya singh

41
3

score 0 · Answer 7 · edited Apr 05 '20 at 01:02

0

Add this line to your component.spec.ts:

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

imports: [
  RouterTestingModule,
  FormsModule
],

edited Apr 05 '20 at 01:02

j3ff

5,719
8
38
51

answered Apr 04 '20 at 15:13

ABDESSAMAD FELOUACH

425
4
6

2

Why component.spec.ts? – pzaenger Apr 04 '20 at 15:22
@pzaenger when the problem is in a test – Julian Egner Aug 21 '20 at 12:36

score 0 · Answer 8 · answered Jul 31 '20 at 06:04

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

No provider for ControlContainer - Angular 5

8 Answers8

Linked

Related