Impossible de se lier à 'formControl' car ce n'est pas une propriété connue de 'input' - Problème de saisie semi-automatique des matériaux Angular2


355

J'essaie d'utiliser le composant Angular Material Autocomplete dans mon projet Angular 2. J'ai ajouté ce qui suit à mon modèle.

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

Voici ma composante.

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

J'obtiens l'erreur suivante. Il ressemble à laformControl directive ne soit pas trouvée.

Impossible de se lier à 'formControl' car ce n'est pas une propriété connue de 'input'

Quel est le problème ici?


5
un commentaire à la réponse de Pengyy: lors de l'utilisation formControl, vous devez importer ReactiveFormsModuledans votre module , pas rootModule . Juste au cas où vous l'utilisez FormControldans vos modules de fonctionnalités.
King John

J'ai un cas similaire et j'ai l'importation de ReactiveFormsModule dans ma fonctionnalité. La seule différence est que je voudrais me lier à 'formControlName' au lieu de 'formControl'. Le message a la même structure
Искрен Станиславов

Les réponses ici sont correctes; mais si quelqu'un est toujours bloqué (comme je l'étais) et l'erreur dit formcontrol(en minuscules) plutôt que formControl- si vous exécutez des modèles via webpack html-loader, cela vous aidera: stackoverflow.com/a/40626329/287568
Ben Boyle

Réponses:


758

Lors de l'utilisation formControl, vous devez importer ReactiveFormsModuledans votre importsbaie.

Exemple:

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

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

173
Vraiment, pourquoi cela n'est-il pas dans la doc à material.angular.io/components/autocomplete/overview autant de temps perdu pour cela. Dépendances magiques inconnues partout avec angulaire.
Vadorequest

4
@Vadorequest: Ces documents concernent le matériel. S'ils commencent à ajouter des documents pour chaque fonctionnalité d'Angular qu'ils utilisent, il pourrait y avoir beaucoup de duplication entre les documents Angular et les documents Material qui finiront par se désynchroniser. Mais j'ai aussi passé beaucoup de temps à me gratter la tête. Vous pouvez toujours soumettre un problème au référentiel
Eric Ihli

22
Ce n'est pas une excuse à mon humble avis. Ils pourraient faire quelque chose, peut-être un "dépannage général" qui renvoie à une sorte de conseils. Si leur bibliothèque dépend d'autres dépendances angulaires natives, c'est aussi leur tâche de mettre en évidence ces deps. Surtout dans ce cas, leur framework est sur "material.angular.io" après tout.
Vadorequest

3
Ou tout simplement un outillage standard qui extrait automatiquement ces types de modules en fonction de ce que vous utilisez. Cela ressemble à un travail pour webpack?
ferr

La nécessité d'utiliser ReactiveFormsModule est claire si vous regardez dans Stackblitz dans les documents de saisie semi-automatique. Plus généralement, n'importe quel composant aura plus de détails dans sa démo Stackblitz que le code sur la page ...
David Haddad

42

Oubliez d'essayer de déchiffrer l'exemple .ts - comme d'autres l'ont dit, il est souvent incomplet.

Au lieu de cela, cliquez simplement sur l'icône 'pop-out' entourée ici et vous obtiendrez un exemple StackBlitz pleinement fonctionnel .

entrez la description de l'image ici

Vous pouvez rapidement confirmer les modules requis:

entrez la description de l'image ici

Commentez toutes les instances de ReactiveFormsModule, et bien sûr, vous obtiendrez l'erreur:

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

Merci, dirigez-moi dans la bonne direction et sachez où regarder à l'avenir!
m.edmondson


-1

Commencez par ajouter un matInput régulier à votre modèle. Supposons que vous utilisez la directive formControl de ReactiveFormsModule pour suivre la valeur de l'entrée.

Les formulaires réactifs fournissent une approche basée sur un modèle pour gérer les entrées de formulaire dont les valeurs changent au fil du temps. Ce guide vous montre comment créer et mettre à jour un contrôle de formulaire simple, passer à l'utilisation de plusieurs contrôles dans un groupe, valider des valeurs de formulaire et implémenter des formulaires plus avancés.

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

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.