No se puede vincular a 'formControl' ya que no es una propiedad conocida de 'input' - Problema de autocompletar material de Angular2

Estoy tratando de usar el componente de autocompletar material angular en mi proyecto Angular 2. Agregué lo siguiente a mi plantilla.

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

El siguiente es mi componente.

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;
    }
}

Recibo el siguiente error. Parece que la formControldirectiva no se está encontrando.

No se puede vincular a 'formControl' ya que no es una propiedad conocida de 'input'

Cuál es el problema aquí?

Durante el uso formControl, debe importar ReactiveFormsModulea su importsmatriz.

Ejemplo:

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}

Olvídate de descifrar el ejemplo .ts, como otros han dicho, a menudo es incompleto.

En su lugar, simplemente haga clic en el ícono 'emergente' marcado aquí y obtendrá un ejemplo de StackBlitz completamente funcional .

Puede confirmar rápidamente los módulos necesarios:

Comente cualquier instancia de ReactiveFormsModule, y seguramente obtendrá el error:

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

Desde la versión 9.1.4 solo necesita importar ReactiveFormsModule

https://angular.io/guide/reactive-forms

Comience agregando un matInput regular a su plantilla. Supongamos que está utilizando la directiva formControl de ReactiveFormsModule para rastrear el valor de la entrada.

Los formularios reactivos proporcionan un enfoque basado en modelos para manejar entradas de formulario cuyos valores cambian con el tiempo. Esta guía le muestra cómo crear y actualizar un control de formulario simple, avanzar al uso de controles múltiples en un grupo, validar valores de formulario e implementar formularios más avanzados.

import { FormsModule, ReactiveFormsModule } from "@angular/forms"; //this to use ngModule

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],