Nie można powiązać z „formControl”, ponieważ nie jest to znana właściwość „input” - problem z autouzupełnianiem Angular2 Material

354

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 formControldyrektywa nie została znaleziona.

Nie można powiązać z „formControl”, ponieważ nie jest to znana właściwość „input”

O co tu chodzi?

Lahiru Chandima
źródło
5
jeden komentarz do odpowiedzi Pengyy'a: Podczas używania formControlmusisz zaimportować ReactiveFormsModuledo modułu , a nie rootModule . Na wypadek, gdybyś używał FormControlw swoich modułach funkcji.
Król Jan
Mam podobny przypadek i mam import dla ReactiveFormsModule w mojej funkcji. Jedyną różnicą jest to, że chciałbym powiązać z „formControlName” zamiast „formControl”. Wiadomość ma tę samą strukturę
Искрен Станиславов
Odpowiedzi tutaj są poprawne; ale jeśli ktoś nadal tkwi (tak jak ja), a błąd mówi formcontrol(małymi literami) zamiast formControl- jeśli uruchamiasz szablony za pomocą modułu ładującego HTML, pomoże to: stackoverflow.com/a/40626329/287568
Ben Boyle

Odpowiedzi:

757

Podczas używania formControlmusisz zaimportować ReactiveFormsModuledo importstablicy.

Przykład:

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}
Pengyy
źródło
173
Naprawdę, dlaczego nie jest to zawarte w dokumencie na stronie material.angular.io/components/autocomplete/viewview , który marnuje na to tyle czasu. Magiczne nieznane zależności wszędzie z kątem.
Vadorequest,
4
@Vadorequest: Te dokumenty dotyczą materiałów. Jeśli zaczną dodawać dokumenty dla każdej używanej przez siebie funkcji Angulara, może dojść do dużej duplikacji między dokumentami Angular i Dokumentami Materialnymi, które ostatecznie wymkną się z synchronizacji. Ale spędziłem też sporo czasu, drapiąc się po głowie. Zawsze możesz przesłać zgłoszenie do materiałowego repozytorium github: github.com/angular/material2/issues
Eric Ihli
22
To nie jest wymówka IMHO. Mogą coś zrobić, na przykład „ogólne rozwiązywanie problemów”, które prowadzi do wskazówek. Jeśli ich biblioteka zależy od innych natywnych zależności kątowych, ich zadaniem jest również wyróżnienie tych zależności. Szczególnie w tym przypadku ich framework znajduje się na „material.angular.io”.
Vadorequest,
3
Lub po prostu standardowe narzędzie, które automatycznie pobiera tego typu moduły w zależności od tego, czego używasz. Brzmi jak praca dla webpacka?
Ferr
Konieczność użycia ReactiveFormsModule jest oczywista, jeśli zajrzysz do Stackblitz w dokumentach autouzupełniania. Mówiąc bardziej ogólnie, każdy komponent będzie zawierał więcej szczegółów w swojej wersji demonstracyjnej Stackblitz niż kod na stronie ...
David Haddad
42

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 .

wprowadź opis zdjęcia tutaj

Możesz szybko potwierdzić wymagane moduły:

wprowadź opis zdjęcia tutaj

Skomentuj wszelkie wystąpienia ReactiveFormsModulei na pewno dostaniesz błąd:

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. 
Simon_Weaver
źródło
Dzięki, wskazałeś mi właściwy kierunek i wiem, gdzie szukać w przyszłości!
m.edmondson
-1

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.

import { FormsModule, ReactiveFormsModule } from "@angular/forms"; //this to use ngModule

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],
Karim Salih
źródło