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

For Angular 11, it should be:

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

    @NgModule({
        imports: [
             FormsModule,
             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.