no provider for ngControl [FormControl] Angular 6

Question

I am learning Angular. While the official tutorial has worked quite well for me, I am stuck with the 'hello world' of Reactive Forms. I am following https://angular.io/guide/reactive-forms. I have created a new component, in an other wise working project, to make an input text box using ReactiveForm. The template html is as follows:

    <div>
        <label>
          Name:
          <input type="text" [formControl]="name">
        </label>
    </div>

The component class looks as follows

import { Component, OnInit } from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'app-party-worker',
  templateUrl: './party-worker.component.html',
  styleUrls: ['./party-worker.component.scss']
})
export class PartyWorkerComponent implements OnInit {
  name = new FormControl('');
  constructor() { }
  ngOnInit() {
  }
}

The error in the browser reads something like this.

Uncaught Error: Template parse errors:
No provider for NgControl ("
    <label>
      Name:
      [ERROR ->]<input type="text" [formControl]="name">
    </label>
  </div>"): ng:///ViewsModule/PartyWorkerComponent.html@3:6

And yes, I have imported ReactiveFormsModule. My angular version, if it is revealed by ng --version is as follows

Angular CLI: 7.0.5
Node: 11.1.0
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.10.5
@angular-devkit/core         7.0.5
@angular-devkit/schematics   7.0.5
@schematics/angular          7.0.5
@schematics/update           0.10.5
rxjs                         6.3.3
typescript                   3.1.6

I fail to understand as to what is it that I am doing wrong. Any help is appreciated.

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

Answer 2

For Angular 11, it should be:

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

    @NgModule({
        imports: [
             FormsModule,
             ReactiveFormsModule      
        ]

Answer 3

For anyone using Storybook.js and seeing this error. Don't forget to import the above mentioned into your story too.

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

moduleMetadata({
  imports: [ReactiveFormsModule]
})

Answer 4

I had this same issue and it turns out I had a custom form control and forgot specify either [(ngModel)] or [formControl] when I used the control.

Answer 5

Sorry for troubling whosoever may have given it a thought. It turned out that there were two modules in my application and the AppModule was not where my component resided! The ReactiveFormsModule was missing in the module which mattered. Added the same and problem solved.

Answer 6

There are possible reasons for this error.

1. Import ReactiveFormsModule

Import ReactiveFormsModule module where your component is declared i.e.

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

2. Initialize formControl

Assign formControl to your input i.e.

<input type="text" [formControl]="yourControl">