ERROR Error: NG0201: No provider for NgControl found in NodeInjector

Question

i ran completly out of ideas. I want to user Reactive Forms Module, so i imported it in app.module.ts like

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

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    ...
    ReactiveFormsModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})

In my Component i defined:

import { Component, OnInit} from "@angular/core";

import { FormControl, FormGroup } from '@angular/forms';

@Component({
    ...
})

export class SearchComponent implements OnInit{
    //Variablen
    form: FormGroup;
    
    //Konstruktor
    constructor(){}

    //Methoden
    ngOnInit(){
        this.form = new FormGroup({
            'title': new FormControl(null)
        });
    }

    showValue(){
        console.log(this.form.get('title'));
    }
}

Compiling works well, but when displaying it it crashes with the error below shown in the Browser Console: "core.js:6156 ERROR Error: NG0201: No provider for NgControl found in NodeInjector."

Does anybody of you has an idea what went wrong?

I would really appreciate any hint.

Thanks a lot!

Antilogarithm

As I know it is not recomend to use new FormGroup(...). Inject an instance of the FormBuilder and than use this.fb.group({ control: new FormControl(null)}). Maybee that can help you. – Unhook

Answer 1

To make this work you'll have to import the ReactiveFormsModule in your @NgModule which is the ViewsModule as your question suggests. As FormControl is exposed as a part of ReactiveFormsModule and NOT the FormsModule.

import { ReactiveFormsModule, ... } from '@angular/forms';

@NgModule({
  imports: [..., ReactiveFormsModule, ...],
  ...
})
export class ViewsModule {...}

Farrington

Answer 2

Just found my (same) mistake, you have to import ReactiveFormsModule in "local" module... In your case it must be "search-component.module.ts"

Algonkian

Answer 3

For everyone else who get this Error, in my case the problem was a missing formControlName attribute and a missing formGroup as a parent. If you use custom form controls in your project as well, ensure all references - formControlName's and [formGroup]="myFormGroup" - are set properly.

Croupier

Answer 4

import FormsModule as well in app.module.ts

Infeasible

I gave it a try but does not solve the issue. I am on Angular Cli 11.1.1. In a similar project i am on 9.1.12 and everything works fine. Maybe its a problem with the new version? – Antilogarithm

This is import issue. Your SearchComponent is not declared in app.module.ts. import FormsModule and ReactiveFormsModule where you have declared your SearchComponent. – Infeasible

Its not listed above you are right, but SeachComponent is declared there represented by ... . The problem is, that the forms declaration and initialisation does not find the formControlName. If i leave it without a name it throws an error but works. If i try to set the formControlName="title" in HTML it crashes with the error code given in the title of this post – Antilogarithm

This was the most important hint to fix my unit test. thx – Rubetta

In my tests I had to import FormsModule while importing ReactiveFormsModule was not necessary. Angualar 14 IIRC. – Marra

Answer 5

You can try to add *ngIf="!isLoading" in your form container in the html. In de .ts file add isLoading = true; in top of var declarations and then after your form is created, isLoading = false; Regards.

Tintoretto

Answer 6

Import ReactiveFormsModule as well in the current module example (login.module.ts or any other module), not in app.module.ts:

Forefather

Why should I not upload images of code/data/errors? – Pomona

Answer 7

I had a similar Problem and imported the FormsModule as suggested, but the NG0201-Error still persisted.

My mistake was the following:

I copy/pasted a part of an component-template previously and had no idea it was still in a subcomponent of the one i was working on.

 <input [...] formControlName="shoppingAmount" [...] />

The problem with this is that if you are not importing the module everything works out fine because angular is just reading it as an html-attribute, but if you are to import the module you now have a formControlName, that is throwing an NG0201-Error.

This leads us to @svenson95's answer.

I solved my error by removing the obsulete code.

Bently

Answer 8

put it into your local module.

import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [],
  imports: [
    FormsModule
  ]
})
export class ... {}

Teamwork