Impossibile associare 'formControl' poiché non è una proprietà nota di 'input' - Problema di completamento automatico del materiale Angular2

Sto cercando di utilizzare il componente di completamento automatico del materiale angolare nel mio progetto Angular 2. Ho aggiunto quanto segue al mio modello.

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

Di seguito è il mio 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;
    }
}

Ricevo il seguente errore. Sembra che la formControldirettiva non sia stata trovata.

Impossibile associare "formControl" poiché non è una proprietà nota di "input"

Qual è il problema qui?

Durante l'utilizzo formControl, è necessario importare ReactiveFormsModuleal vostro importsarray.

Esempio:

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

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

Dimentica di provare a decifrare l'esempio .ts - come altri hanno già detto che spesso è incompleto.

Invece fai semplicemente clic sull'icona 'pop-out' cerchiata qui e otterrai un esempio StackBlitz perfettamente funzionante .

Puoi confermare rapidamente i moduli richiesti:

Commenta tutte le istanze di ReactiveFormsModulee sicuramente otterrai l'errore:

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

Dalla versione 9.1.4 devi solo importare ReactiveFormsModule

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

Inizia aggiungendo un normale matInput al tuo modello. Supponiamo che tu stia utilizzando la direttiva formControl da ReactiveFormsModule per tenere traccia del valore dell'input.

Le forme reattive forniscono un approccio basato sul modello per la gestione degli input delle forme i cui valori cambiano nel tempo. Questa guida mostra come creare e aggiornare un controllo modulo semplice, passare all'utilizzo di più controlli in un gruppo, convalidare i valori del modulo e implementare moduli più avanzati.

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

...

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