Impossibile associare 'formControl' poiché non è una proprietà nota di 'input' - Problema di completamento automatico del materiale Angular2


355

Sto cercando di utilizzare il componente di completamento automatico del materiale angolare nel mio progetto Angular 2. Ho aggiunto quanto segue al mio modello.

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

Di seguito è il mio componente.

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

Ricevo il seguente errore. Sembra che la formControldirettiva non sia stata trovata.

Impossibile associare "formControl" poiché non è una proprietà nota di "input"

Qual è il problema qui?


5
un commento alla risposta di Pengyy: Durante l'utilizzo formControl, devi importare ReactiveFormsModulenel tuo modulo , non rootModule . Nel caso in cui si utilizzi FormControlnei moduli funzione.
Re Giovanni,

Ho un caso simile e ho l'importazione per ReactiveFormsModule nella mia funzione. L'unica differenza è che vorrei associare 'formControlName' invece di 'formControl'. Il messaggio ha la stessa struttura
Искрен Станиславов

Le risposte qui sono corrette; ma se qualcuno è ancora bloccato (come lo ero io) e l'errore dice formcontrol(minuscolo) piuttosto che formControl- se stai eseguendo modelli tramite webpack html-loader, questo ti aiuterà: stackoverflow.com/a/40626329/287568
Ben Boyle

Risposte:


758

Durante l'utilizzo formControl, è necessario importare ReactiveFormsModuleal vostro importsarray.

Esempio:

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}

173
Davvero, perché non è questo nel documento su material.angular.io/components/autocomplete/overview così tanto tempo perso per questo. Magiche dipendenze sconosciute ovunque con angolare.
Vadorequest,

4
@Vadorequest: questi documenti sono per Material. Se iniziano ad aggiungere documenti per ogni caratteristica di Angular che usano, potrebbe finire per esserci molta duplicazione tra i documenti Angular e i documenti Material che finiranno per sfuggire alla sincronizzazione. Ma ho passato molto tempo a grattarmi la testa. Puoi sempre inviare un problema al repository github materiale: github.com/angular/material2/issues
Eric Ihli

22
Non è una scusa IMHO. Potrebbero fare qualcosa, forse una "risoluzione generale dei problemi" che rimanda a qualche tipo di suggerimento. Se la loro biblioteca dipende da altre dipendenze angolari native, è anche loro compito evidenziare quelle profondità. Soprattutto in questo caso, il loro framework è su "material.angular.io" dopo tutto.
Vadorequest,

3
O semplicemente uno strumento standard che inserisce automaticamente questi tipi di moduli in base a ciò che stai utilizzando. Sembra un lavoro per il webpack?
ferr

La necessità di utilizzare ReactiveFormsModule è chiara se si guarda all'interno di Stackblitz nei documenti di completamento automatico. Più in generale, qualsiasi componente avrà più dettagli nella sua demo di Stackblitz rispetto al codice in-page ...
David Haddad,

42

Dimentica di provare a decifrare l'esempio .ts - come altri hanno già detto che spesso è incompleto.

Invece fai semplicemente clic sull'icona 'pop-out' cerchiata qui e otterrai un esempio StackBlitz perfettamente funzionante .

inserisci qui la descrizione dell'immagine

Puoi confermare rapidamente i moduli richiesti:

inserisci qui la descrizione dell'immagine

Commenta tutte le istanze di ReactiveFormsModulee sicuramente otterrai l'errore:

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. 

Grazie, mi ha indicato la giusta direzione e sa dove guardare in futuro!
m.edmondson,


-1

Inizia aggiungendo un normale matInput al tuo modello. Supponiamo che tu stia utilizzando la direttiva formControl da ReactiveFormsModule per tenere traccia del valore dell'input.

Le forme reattive forniscono un approccio basato sul modello per la gestione degli input delle forme i cui valori cambiano nel tempo. Questa guida mostra come creare e aggiornare un controllo modulo semplice, passare all'utilizzo di più controlli in un gruppo, convalidare i valori del modulo e implementare moduli più avanzati.

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

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.