Kann nicht an 'formControl' binden, da es keine bekannte Eigenschaft von 'input' ist - angular2 material Autocomplete Problem

Ich versuche, Angular Material Autocomplete Komponente in meinem Angular2-Projekt zu verwenden. Ich fügte folgende zu meiner Vorlage.

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

Folgendes 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 ob die Richtlinie formControl nicht gefunden wird.

Can't bind to 'formControl' since it is'not a known property of 'input'

Was ist hier das Problem?

Kamil Naja
Bearbeitete Frage 20. Februar 2019 в 3:49
Programmierung
angular typescript angular-material2 angular-forms
5. April 2017 в 1:32
6 Aufrufe
Lösung

Wenn Sie formControl verwenden, müssen Sie ReactiveFormsModule in Ihr imports-Array importieren.

Beispiel:

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}
Alexander Abakumov
Bearbeitete Antwort 27. August 2018 в 2:06
Kommentare (5)

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

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

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

Kommentieren Sie alle Instanzen von ReactiveFormsModule aus, und Sie werden sicher den Fehler erhalten:

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'.
Simon_Weaver
Bearbeitete Antwort 2. März 2019 в 10:12
Kommentare (1)

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

Reaktive Formulare bieten einen modellgesteuerten Ansatz zur Behandlung 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],
Kommentare (0)