no provider for ngControl [FormControl] Angular 6

angular

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.

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

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]
})

For Angular 11, it should be:

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

    @NgModule({
        imports: [
             FormsModule,
             ReactiveFormsModule      
        ]

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.

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.

no provider for ngControl [FormControl] Angular 6

Related

Recent Posts