No provider for ControlContainer - Angular 5

no provider for controlcontainer reactive form
template parse errors: no provider for controlcontainer angular 8
nullinjectorerror: no provider for ngform!
uncaught error: template parse errors: no provider for controlcontainer
no provider for controlcontainer jasmine
not_found [controlcontainer]
no provider for controlcontainer ("[error ->]<form class="example-form">
no provider for formgroupdirective!

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

import FormsModule in addition to ReactiveFormsModule

Angular 5: "No provider for ControlContainer", The ControlContainer is a abstract class which is extended by the AbstractFormGroupDirective inside the ReactiveFormsModule . The error is  Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

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

How to fix Angular4/5/6 'No provider for ControlContainer , No provider for ControlContainer ("<div class="recall-container mat-elevation-z8"​>. Solution: You have not added the @angular/forms  Angular 5: "No provider for ControlContainer" Posted on February 24, 2018 by Marvin H. how to Angular 5: "No provider for ControlContainer" I have a little web app

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

No provider for ControlContainer Error in Angular, I am creating Angular material application form with validation and getting error. Error: Template parse errors: No provider for ControlContainer  How to fix Angular4/5/6 ‘No provider for ControlContainer’ You have not added the @angular/forms FormsModule to your module’s import list.

No provider for ControlContainer! (NgControlName , No provider for ControlContainer! angular-automatic-lock-bot bot locked and limited conversation to collaborators on Sep 7, 2019. Sign up for  26.5k 5 5 gold badges 23 23 silver badges 59 59 bronze badges At the cost of repetition, let me state that I have already done that in the app module. Imported both ReactiveFormsModule, and FormModule since ab initio.

No provider for ControlContainer when a child component has a , No provider for ControlContainer when a child component has a import {​FormsModule, ReactiveFormsModule} from '@angular/forms';  Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

Angular 5: "No provider for ControlContainer" – Angular Questions, how to Angular 5: "No provider for ControlContainer". I have a little web app with Angular 5 and out of a sudden I am getting this strange error  Using ngControl caused error: No provider for ControlContainer. No provider for ControlContainer and No provider for ControlContainer Angular 5: “No

Comments
  • This is not making a difference for me. Still getting the error
  • 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