J'essaie d'utiliser le composant angular material [autocomplete][1] dans mon projet angular2. 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 mon composant.
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 semble que la directive formControl
ne soit pas trouvée.
Can't bind to 'formControl' ; since it isn't a known property of 'input' ;
Quel est le problème ?
[1] : https://material.angular.io/components/component/autocomplete
En utilisant formControl
, vous devez importer ReactiveFormsModule
dans votre tableau imports
.
Exemple :
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
],
...
})
export class AppModule {}
N'essayez pas de déchiffrer l'exemple .ts - comme d'autres l'ont dit, il est souvent incomplet.
Cliquez plutôt sur l'icône "pop-out" entourée ici et vous obtiendrez un [exemple StackBlitz entièrement fonctionnel][2].
[!entrer la description de l'image ici][1]][1]
Vous pouvez rapidement confirmer les modules requis :
[!entrez la description de l'image ici][3]][3]
Commentez toutes les instances de ReactiveFormsModule
, et vous obtiendrez l'erreur :
Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'.
[1] : https://i.stack.imgur.com/imATI.png [2] : https://stackblitz.com/angular/rmnkqxeeqxl [3] : https://i.stack.imgur.com/TCY4Z.png
Commencez par ajouter un matInput ordinaire à votre modèle. Supposons que vous utilisiez la directive formControl du ReactiveFormsModule pour suivre la valeur de l'entrée.
Les formulaires réactifs offrent une approche guidée par le modèle pour gérer les entrées de formulaire dont les valeurs changent dans le temps. Ce guide vous montre comment créer et mettre à jour un simple contrôle de formulaire, puis comment utiliser plusieurs contrôles dans un groupe, valider les valeurs du formulaire et mettre en œuvre des formulaires plus avancés.
import { FormsModule, ReactiveFormsModule } from "@angular/forms"; //this to use ngModule
...
imports: [
BrowserModule,
AppRoutingModule,
HttpModule,
FormsModule,
RouterModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MaterialModule],