Afficher la liste déroulante de saisie semi-automatique uniquement après avoir tapé au moins 1 lettre dans Angular 2+
Je voudrais implémenter une saisie semi-automatique en utilisant Angular 2+ with angular material design où les options ne devraient pas apparaître sauf si elles ont tapé au moins 1 lettre.
Par défaut, la saisie semi-automatique est commutable sur le focus même lorsque l'entrée est vide, je souhaite donc modifier ce comportement.
J'ai essayé d'ajouter une condition sur l'élément mat-autocomplete *ngIf="inputField.value" afin d'afficher les options uniquement si l'entrée a une valeur, mais elle renvoie l'erreur:
Erreur: tentative d'ouverture d'une instance non définie de mat-autocomplete. Assurez-vous que l'ID transmis au matAutocomplete est correct et que vous essayez de l'ouvrir après le hook ngAfterContentInit.
J'ai également essayé d'ajouter une condition dans [matAutocomplete]="auto" dans le champ de saisie, mais il renvoie également une erreur.
J'ai remarqué que lorsque les options de saisie semi-automatique sont affichées, les éléments cdk-overlay-container et mat-autocomplete-panel sont créés avant la fermeture </body>, et ils ne sont pas liés au composant d'origine, il est donc difficile de les masquer par CSS.
Avez-vous des idées pour y parvenir?
Veuillez suivre le code sur Stackblitz .
Merci!
N'appelez pas la fonction de filtre si la longueur du texte tapé est égale à 0.
this.filteredOptions = this.myControl.valueChanges
pipe(
startWith(''),
map(val => val.length >= 1 ? this.filter(val): [])
);