Comment désélectionner l'option sélectionnée dans md-sélectionnez Angular2
Dans material2 lorsqu'une sélection est initialisé pas de valeur par défaut est sélectionné. Si l'utilisateur sélectionne une valeur qu'il ne peut pas le désélectionner. Je veux permettre à l'utilisateur de désélectionner la valeur.
Je suis allé à travers la déjà disponible, mais n'était pas en mesure de l'utiliser.
<mat-select id="formal" formControlName="formal" placeholder="Default - No value selected">
<mat-option value="1">formal</mat-option>
<mat-option value="2">informal</mat-option>
</mat-select>
OriginalL'auteur Mahin Khan | 2017-02-02
Vous devez vous connecter pour publier un commentaire.
J'ai fini par utiliser ngModel et réglage de la valeur undefined pour obtenir le résultat requis.
Dans le Composant
plunkr pour la réponse.
Cela ne devrait pas être accepté de répondre. L'utilisation de ngModel est vaine et inutile, puisque des formes angulaires ont de la valeur
Que faire si vous n'êtes pas à l'aide d'un formulaire?
OriginalL'auteur Mahin Khan
Si vous utilisez des formes angulaires, vous pouvez toujours
patchValue
à''
comme indiqué ci-dessous.Tout d'abord, l'élément select. Cet exemple utilise Ionique, mais c'est le même que Angulaires.
Où
form
est unFormGroup
.Et la
unselect
méthode des correctifs de valeur null.En ce qui concerne meilleur!
OriginalL'auteur Guilherme Sampaio
J'ai une autre solution qui je pense vaut la peine de le mentionner: ajouter un vide
<md-option>
etreset
la<md-select>
sur sonclick
de cette façon, vous n'avez pas besoin de code personnalisé dans votre
Component
ni utiliserngModel
voir Plunker
dans un html
select
vous n'avez pas cette option, soit...vous devez créer un videoption
ou un '-- sélectionnez quelque chose --'option
d'avoir un "état par défaut". De cette façon, le mieux pour l'INTERFACE utilisateur que l'utilisateur a l'option de ne rien sélectionner au lieu de cliquer sur un bouton mais je ne sais pas votre cas d'utilisation. 😉plunkr lien est boken
probablement à cause de l'ancienne version de anguleuse/matière mais l'idée reste la même
OriginalL'auteur Elmer Dantas
Qu'en utilisant une méthode de matSelect.
onChange(event) {
....
OriginalL'auteur Sébastien Richez
La mise à jour de la accepté de répondre à Angulaire 6:
OriginalL'auteur mattavatar
OriginalL'auteur Samir Ghoneim
un peu en retard mais je viens de rajouter une option que le premier, pour permettre à l'utilisateur d'effacer la dropdownlist
OriginalL'auteur Jan Feyen