Can't bind to 'formControl' since it isn't a known property of 'input' - Angular2 Material Autocomplete issue

Question

I am trying to use Angular Material Autocomplete component in my Angular 2 project. I added the following to my template.

<md-input-container>    <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl"> </md-input-container>  <md-autocomplete #auto="mdAutocomplete">    <md-option *ngFor="let state of filteredStates | async" [value]="state">       {{ state }}    </md-option> </md-autocomplete> 

Following is my component.

import {Component, OnInit} from "@angular/core"; import {ActivatedRoute, Router} from "@angular/router"; import {FormControl} from "@angular/forms";  @Component({     templateUrl: './edit_item.component.html',     styleUrls: ['./edit_item.component.scss'] }) export class EditItemComponent implements OnInit {     stateCtrl: FormControl;     states = [....some data....];      constructor(private route: ActivatedRoute, private router: Router) {         this.stateCtrl = new FormControl();         this.filteredStates = this.stateCtrl.valueChanges.startWith(null).map(name => this.filterStates(name));     }     ngOnInit(): void {     }     filterStates(val: string) {         return val ? this.states.filter((s) => new RegExp(val, 'gi').test(s)) : this.states;     } } 

I'm getting the following error. It looks like the formControl directive is not being found.

Can't bind to 'formControl' since it isn't a known property of 'input'

What is the issue here?

Answer 1

While using formControl, you have to import ReactiveFormsModule to your imports array.

Example:

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

Answer 2

Forget trying to decipher the example .ts - as others have said it is often incomplete.

Instead just click on the 'pop-out' icon circled here and you'll get a fully working StackBlitz example.

You can quickly confirm the required modules:

Comment out any instances of ReactiveFormsModule, and sure enough you'll get the error:

Template parse errors: Can't bind to 'formControl' since it isn't a known property of 'input'.