Can't bind to 'formControl' since it isn't a known property of 'input' - angular2 material Autocomplete problem

Jeg prøver å bruke angular material autocomplete komponent i mitt angular2 prosjekt. Jeg la til følgende i malen min.

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

Følgende er min 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;
    }
}

Jeg får følgende feilmelding. Det ser ut til at formControl-direktivet ikke blir funnet.

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

Hva er problemet her?

Kamil Naja
Redigerte spørsmål 20. februar 2019 в 3:49
Programmering
angular typescript angular-material2 angular-forms
5. april 2017 в 1:32
4 visninger
Løsning

Når du bruker formControl, må du importere ReactiveFormsModule til imports-matrisen.

Eksempel:

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}
Alexander Abakumov
Redigert svar 27. august 2018 в 2:06
Kommentarer (5)

Glem å prøve å tyde eksemplet .ts - som andre har sagt, er det ofte ufullstendig.

I stedet er det bare å klikke på ikonet som er sirklet inn her, så får du et fullt fungerende StackBlitz-eksempel.

.

Du kan raskt bekrefte de nødvendige modulene:

3

Kommenter ut alle forekomster av ReactiveFormsModule, og du vil ganske sikkert få feilen:

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'.
Simon_Weaver
Redigert svar 2. mars 2019 в 10:12
Kommentarer (1)

Begynn med å legge til en vanlig matInput i malen. La oss anta at du bruker formControl-direktivet fra ReactiveFormsModule til å spore verdien på inndataene.

Reaktive skjemaer gir en modelldrevet tilnærming til håndtering av skjemainput hvis verdier endres over tid. Denne veiledningen viser deg hvordan du oppretter og oppdaterer en enkel skjemakontroll, går videre til å bruke flere kontroller i en gruppe, validerer skjemaværdier og implementerer mer avanserte skjemaer.

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

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],
Kommentarer (0)