wake-up-neo.com

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

Ich versuche, in meinem angle2-Projekt die Komponente angular material autocomplete zu verwenden. Ich habe folgende zu meiner Vorlage 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>

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 Anweisung formControl nicht gefunden wird.

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

Worum geht es hier?

angulartypescriptangular-material2angular-forms
258
Lahiru Chandima

Während 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 {}
561
Pengyy

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 'Pop-Out'-Symbol, das hier eingekreist ist, und Sie erhalten ein voll funktionsfähiges StackBlitz-Beispiel .

enter image description here

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

enter image description here

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

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