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 formControl
Richtlinie nicht gefunden.
Kann nicht an 'formControl' gebunden werden, da es keine bekannte Eigenschaft von 'input' ist.
Was ist das Problem hier?
angular
typescript
angular-material2
angular-forms
Lahiru Chandima
quelle
quelle
formControl
müssen SieReactiveFormsModule
in Ihr Modul importieren , nicht in rootModule . Nur für den Fall, dass SieFormControl
in Ihren Funktionsmodulen verwenden.formcontrol
eher (Kleinbuchstaben) alsformControl
- wenn Sie Vorlagen über den Webpack-HTML-Loader ausführen, hilft dies: stackoverflow.com/a/40626329/287568Antworten:
Während der Verwendung
formControl
müssen SieReactiveFormsModule
in Ihrimports
Array importieren .Beispiel:
quelle
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:quelle
Ab Version 9.1.4 müssen Sie nur noch importieren
ReactiveFormsModule
https://angular.io/guide/reactive-forms
quelle
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.
...
quelle