Kann nicht an 'formControl' gebunden werden, da es keine bekannte Eigenschaft von 'input' ist - Angular2 Material Autocomplete-Problem

Ich versuche, die Angular Material Autocomplete- Komponente in meinem Angular 2-Projekt zu verwenden. Ich habe meiner Vorlage Folgendes hinzugefügt.

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

Das Folgende ist meine Komponente.

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

Ich erhalte den folgenden Fehler. Es sieht so aus, als würde die formControlRichtlinie nicht gefunden.

Kann nicht an 'formControl' gebunden werden, da es keine bekannte Eigenschaft von 'input' ist.

Was ist das Problem hier?

Während der Verwendung formControlmüssen Sie ReactiveFormsModulein Ihr importsArray importieren .

Beispiel:

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

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

Vergessen Sie den Versuch, das Beispiel .ts zu entschlüsseln - wie andere gesagt haben, ist es oft unvollständig.

Klicken Sie stattdessen einfach auf das hier eingekreiste Popup-Symbol und Sie erhalten ein voll funktionsfähiges StackBlitz-Beispiel .

Sie können die erforderlichen Module schnell bestätigen:

Kommentieren Sie alle Instanzen von aus ReactiveFormsModule, und Sie erhalten mit Sicherheit den Fehler:

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

Ab Version 9.1.4 müssen Sie nur noch importieren ReactiveFormsModule

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

Fügen Sie Ihrer Vorlage zunächst einen regulären matInput hinzu. Angenommen, Sie verwenden die formControl-Direktive von ReactiveFormsModule, um den Wert der Eingabe zu verfolgen.

Reaktive Formulare bieten einen modellgetriebenen Ansatz für die Verarbeitung von Formulareingaben, deren Werte sich im Laufe der Zeit ändern. In diesem Handbuch erfahren Sie, wie Sie ein einfaches Formularsteuerelement erstellen und aktualisieren, mehrere Steuerelemente in einer Gruppe verwenden, Formularwerte validieren und erweiterte Formulare implementieren.

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

...

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