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

355

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?

Lahiru Chandima
quelle
5
Ein Kommentar zu Pengyys Antwort: Während der Verwendung formControlmüssen Sie ReactiveFormsModulein Ihr Modul importieren , nicht in rootModule . Nur für den Fall, dass Sie FormControlin Ihren Funktionsmodulen verwenden.
König John
Ich habe einen ähnlichen Fall und habe den Import für ReactiveFormsModule in meiner Funktion. Der einzige Unterschied ist, dass ich anstelle von 'formControl' an 'formControlName' binden möchte. Die Nachricht hat die gleiche Struktur
Искрен Станиславов
Die Antworten hier sind richtig; Aber wenn noch jemand feststeckt (wie ich) und der Fehler formcontroleher (Kleinbuchstaben) als formControl- wenn Sie Vorlagen über den Webpack-HTML-Loader ausführen, hilft dies: stackoverflow.com/a/40626329/287568
Ben Boyle

Antworten:

758

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 {}
Pengyy
quelle
173
Warum wird im Dokument unter material.angular.io/components/autocomplete/overview nicht so viel Zeit dafür verschwendet? Magische unbekannte Abhängigkeiten überall mit Winkel.
Vadorequest
4
@Vadorequest: Diese Dokumente sind für Material. Wenn sie Dokumente für jede von ihnen verwendete Angular-Funktion hinzufügen, kann es zu vielen Duplikaten zwischen den Angular-Dokumenten und den Material-Dokumenten kommen, die möglicherweise nicht mehr synchron sind. Aber ich habe auch viel Zeit damit verbracht, mir am Kopf zu kratzen. Sie können jederzeit ein Problem beim Material Github Repo einreichen: github.com/angular/material2/issues
Eric Ihli
22
Das ist meiner Meinung nach keine Entschuldigung. Sie könnten etwas dagegen tun, vielleicht eine "allgemeine Fehlerbehebung", die auf eine Art von Tipps verweist. Wenn ihre Bibliothek von anderen nativen Winkelabhängigkeiten abhängt, ist es auch ihre Aufgabe, diese Deps hervorzuheben. Gerade in diesem Fall ist ihr Framework doch auf "material.angular.io".
Vadorequest
3
Oder einfach ein Standardwerkzeug, das diese Modultypen automatisch einbindet, je nachdem, was Sie verwenden. Klingt nach einem Job für Webpack?
Ferr
Die Notwendigkeit, ReactiveFormsModule zu verwenden, ist klar, wenn Sie in Stackblitz in den Dokumenten zur automatischen Vervollständigung nachsehen. Im Allgemeinen enthält jede Komponente mehr Details in ihrer Stackblitz-Demo als der In-Page-Code ...
David Haddad
42

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 .

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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'. 
Simon_Weaver
quelle
Danke, habe mich in die richtige Richtung gelenkt und weiß, wo ich in Zukunft suchen muss!
m.edmondson
-1

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],
Karim Salih
quelle