Kan't binden aan 'formControl' omdat het'geen bekende eigenschap van 'input' is - angular2 materiaal Autocomplete probleem

Ik probeer angular material autocomplete component te gebruiken in mijn angular2 project. Ik heb het volgende toegevoegd aan mijn template.

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

Het volgende is mijn component.

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

Ik krijg de volgende foutmelding. Het lijkt erop dat de formControl directive niet gevonden wordt.

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

Wat is hier het probleem?

Kamil Naja
Bewerkte vraag 20ste2 februari 2019 в 3:49
Programmering
angular typescript angular-material2 angular-forms
5de2 april 2017 в 1:32
8 views
Oplossing

Als je formControl gebruikt, moet je ReactiveFormsModule importeren in je imports array.

Voorbeeld:

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}
Alexander Abakumov
Bewerkt antwoord 27ste0 augustus 2018 в 2:06
Commentaren (5)

Vergeet het voorbeeld .ts te ontcijferen - zoals anderen al zeiden is het vaak onvolledig.

In plaats daarvan klik je gewoon op het 'pop-out' icoontje hier omcirkeld en je'krijgt een volledig werkend StackBlitz voorbeeld.

U kunt snel de benodigde modules bevestigen:

Commentarieer alle instanties van ReactiveFormsModule uit, en zeker genoeg krijg je de foutmelding:

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'.
Simon_Weaver
Bewerkt antwoord 2de5 maart 2019 в 10:12
Commentaren (1)

Begin met het toevoegen van een gewone matInput aan je sjabloon. Laten we aannemen dat je de formControl directive van de ReactiveFormsModule gebruikt om de waarde van de invoer bij te houden.

Reactieve formulieren bieden een modelgestuurde benadering voor het omgaan met formulierinvoer waarvan de waarden in de loop van de tijd veranderen. Deze handleiding laat zien hoe je een eenvoudig formulier kunt maken en bijwerken, hoe je meerdere formulieren in een groep kunt gebruiken, hoe je formulierwaarden kunt valideren, en hoe je meer geavanceerde formulieren kunt implementeren.

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

...

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