AngularJS: Masquer le formulaire en un clic sans afficher le message d'erreur

Question

Voici à quoi ressemble ma forme dans le plunker.

J'ai ajouté la validation ng-message sur mon champ email. Pour le rendre plus convivial, je montre le message d'erreur sur le flou et pour y parvenir j'ai utilisé ng-model-options="{ updateOn: 'blur' }". J'ai aussi un bouton Hide pour cacher le formulaire. Jusqu'à présent, cela fonctionne bien.

Problème:

1. Si je tape une adresse e-mail valide dans le champ et cliquez sur l'extérieur, un message d'erreur montre. Mais si je tape un email invalide et que je clique sur le bouton Hide Form, je veux cacher le formulaire au lieu d'afficher le message d'erreur en premier.

N.B. Étrangement parfois Cacher le formulaire fonctionne comme prévu, mais la plupart du temps il ne fonctionne pas. et je ne sais pas pourquoi.

2. Il est facultatif: Puis-je cacher mon message d'erreur si je concentre de nouveau le champ de saisie? Je pense que ça va améliorer un peu l'UX.

travail Plunker

Answer 1

1 - Cela se produit parce que le bouton est déplacé loin du curseur de la souris dès que la zone de texte perd le focus, ce qui est à l'origine du clic pour annuler. Solution simple:

changement

ng-click="canceled = true" 

à

ng-mousedown="canceled = true" 

Si vous ne voulez pas ce comportement instantané de la souris vers le bas, vous pouvez faire quelque chose comme

ng-mousedown="mousedown = true" 
ng-mouseup="mousedown = false" 

et ajoutez! mousedown au ng-if du bloc d'aide. Ou positionnez simplement le bouton de masquage afin qu'il ne bouge pas lorsque le bloc d'erreur s'affiche. Vous pouvez utiliser position: absolute, ou quelque chose comme ng-style = "{'visibility': condition? 'Visible': 'hidden'}" sur le bloc d'aide afin qu'il n'affecte pas la mise en page lorsqu'il est caché.

2 - Oui, bien sûr.

Dans l'élément d'entrée:

ng-focus="focused = true" 
ng-blur="focused = false" 

Ensuite, dans le ng, si de l'aide-bloc:

ng-if="userForm.email.$touched && !focused" 

Plunkr