Impossible de se lier à 'formControl' car ce n'est pas une propriété connue de 'input' - Problème de saisie semi-automatique des matériaux Angular2

J'essaie d'utiliser le composant Angular Material Autocomplete dans mon projet Angular 2. J'ai ajouté ce qui suit à mon modèle.

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

Voici ma composante.

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

J'obtiens l'erreur suivante. Il ressemble à laformControl directive ne soit pas trouvée.

Impossible de se lier à 'formControl' car ce n'est pas une propriété connue de 'input'

Quel est le problème ici?

Lors de l'utilisation formControl, vous devez importer ReactiveFormsModuledans votre importsbaie.

Exemple:

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

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

Oubliez d'essayer de déchiffrer l'exemple .ts - comme d'autres l'ont dit, il est souvent incomplet.

Au lieu de cela, cliquez simplement sur l'icône 'pop-out' entourée ici et vous obtiendrez un exemple StackBlitz pleinement fonctionnel .

Vous pouvez rapidement confirmer les modules requis:

Commentez toutes les instances de ReactiveFormsModule, et bien sûr, vous obtiendrez l'erreur:

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

Depuis la version 9.1.4, il vous suffit d'importer ReactiveFormsModule

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

Commencez par ajouter un matInput régulier à votre modèle. Supposons que vous utilisez la directive formControl de ReactiveFormsModule pour suivre la valeur de l'entrée.

Les formulaires réactifs fournissent une approche basée sur un modèle pour gérer les entrées de formulaire dont les valeurs changent au fil du temps. Ce guide vous montre comment créer et mettre à jour un contrôle de formulaire simple, passer à l'utilisation de plusieurs contrôles dans un groupe, valider des valeurs de formulaire et implémenter des formulaires plus avancés.

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

...

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