CODEWITHSUNDEEP
angularangular5angular-componentsangular-forms
Todd Davis
Todd Davis

Reputation: 6035

No provider for ControlContainer - Angular 5

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

Upvotes: 50

Views: 76887

Answers (8)

ddc
ddc

Reputation: 965

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

Upvotes: 0

taniya singh
taniya singh

Reputation: 41

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

Upvotes: 3

Vibhor Dube
Vibhor Dube

Reputation: 5071

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.

Upvotes: 7

ABDESSAMAD FELOUACH
ABDESSAMAD FELOUACH

Reputation: 435

Add this line to your component.spec.ts:

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

imports: [
  RouterTestingModule,
  FormsModule
],

Upvotes: 0

dbedit
dbedit

Reputation: 211

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

Upvotes: 9

Govind Samrow
Govind Samrow

Reputation: 10189

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

Upvotes: 28

blazehub
blazehub

Reputation: 1960

import FormsModule in addition to ReactiveFormsModule

Upvotes: 86

Todd Davis
Todd Davis

Reputation: 6035

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

Upvotes: 22

Related Questions