Modifier: Il existe des solutions de contournement comme indiqué ci-dessous (voir les réponses) pour les formulaires basés sur des modèles. (Je recherche une solution pour les formulaires réactifs.)
Comment puis-je forcer la saisie semi-automatique du matériau angulaire à saisir des lettres uniquement fournies par une source de données?
>> Voir l'ensemble app ici sur stackblitz.com
"Adel" est la valeur initiale et elle est fournie par le tableau d'options:
options: User[] = [
{name: 'George Michael'},
{name: 'Aretha Franklin'},
{name: 'Adel'},
{name: 'Janet Jackson'},
];
L'auto -complete fonctionne correctement:
Cependant, ce qui suit ne devrait pas être possible:
L'utilisateur ne peut saisir que les lettres correspondant à une entrée de la liste, i. les premières lettres d'une entrée existante.
Si l'utilisateur tente de saisir des lettres qui ne correspondent à aucune des valeurs existantes, un message d'erreur doit informer l'utilisateur: "La valeur saisie doit correspondre à une entrée de liste".
Est-il possible de faire cela avec la saisie semi-automatique du matériau angulaire?
3 Réponses :
Il peut être plus efficace d'intercepter l'entrée de clé au moment de la saisie en ajoutant un gestionnaire de touches à l'entrée. Ensuite, regardez ce que serait la valeur et comparez-la à la liste, en «annulant» l'événement si nécessaire. En gros:
<input (keydown)="keydownHandler($event)" ...
keydownHandler(event: KeyboardEvent) {
const character = event.key;
if (character.length === 1) {
let value = this.myForm.controls.myControl.value;
if (typeof value === 'object') {
value = value.name;
}
value = (value + character).toLowerCase();
if (!this.options.some(option => option.name.toLowerCase().indexOf(value) === 0)) {
event.preventDefault();
}
}
}
Cela fonctionne avec tout type de formulaire.
merci, votre solution fonctionne correctement mais n'est pas conviviale. : / J'ai écrit un validateur personnalisé, pour résoudre ce problème.
pourquoi pas :) J'adorerais!
J'ai résolu ce problème avec un validateur personnalisé. Si vous voulez le voir, ici ,. .
Dans la liste mais sensible à la casse:
Valeur incorrecte
Tout va bien
Vous pouvez également essayer la méthode suivante qui ne nécessite pas de vérifier les éléments dans la liste entière.
Sélection de force de composant de saisie semi-automatique de matériau angulaire: exemple complet < / p>
Voici le code de démonstration sur Stackblitz
Copie possible de Comment arrêter la saisie semi-automatique du tapis pour supprimer les valeurs d'entrée utilisateur personnalisées des options données?
@ PatrykUszyński les solutions sont trop anciennes, il doit s'agir d'un matériau angulaire et angulaire ^ 7, je vais mettre à jour le titre. Comme vous le voyez, il n'y a pas de réponses acceptées. Ne soyez pas trop zélé, merci!
Essayez ceci: github.com/angular/material2/issues/3334#issuecomment-469718 514
@ PatrykUszyński Peut-être que c'est actuellement le seul moyen possible -> rédiger sa propre directive, merci. Mais la solution est pour un formulaire basé sur un modèle.