Próbuję użyć komponentu autouzupełniania Angular Material w moim projekcie Angular 2. Dodałem następujące do mojego szablonu.
<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>
Oto mój komponent.
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;
}
}
Otrzymuję następujący błąd. Wygląda na to, że formControl
dyrektywa nie została znaleziona.
Nie można powiązać z „formControl”, ponieważ nie jest to znana właściwość „input”
O co tu chodzi?
angular
typescript
angular-material2
angular-forms
Lahiru Chandima
źródło
źródło
formControl
musisz zaimportowaćReactiveFormsModule
do modułu , a nie rootModule . Na wypadek, gdybyś używałFormControl
w swoich modułach funkcji.formcontrol
(małymi literami) zamiastformControl
- jeśli uruchamiasz szablony za pomocą modułu ładującego HTML, pomoże to: stackoverflow.com/a/40626329/287568Odpowiedzi:
Podczas używania
formControl
musisz zaimportowaćReactiveFormsModule
doimports
tablicy.Przykład:
źródło
Zapomnij o próbie rozszyfrowania przykładowego pliku .ts - jak powiedzieli inni, często jest niekompletny.
Zamiast tego wystarczy kliknąć ikonę „wyskakującą” w kółku, a otrzymasz w pełni działający przykład StackBlitz .
Możesz szybko potwierdzić wymagane moduły:
Skomentuj wszelkie wystąpienia
ReactiveFormsModule
i na pewno dostaniesz błąd:źródło
Od wersji 9.1.4 wystarczy tylko zaimportować
ReactiveFormsModule
https://angular.io/guide/reactive-forms
źródło
Zacznij od dodania regularnego matInput do swojego szablonu. Załóżmy, że używasz dyrektywy formControl z ReactiveFormsModule do śledzenia wartości danych wejściowych.
Formularze reaktywne zapewniają podejście oparte na modelu do obsługi danych wejściowych formularza, których wartości zmieniają się w czasie. W tym przewodniku pokazano, jak utworzyć i zaktualizować prosty formant formularza, przejść do korzystania z wielu formantów w grupie, sprawdzić wartości formularzy i zaimplementować bardziej zaawansowane formularze.
...
źródło