angulaire ng-messages indiquant uniquement lorsque $touché est vrai
Je ne fais pas quelque chose de trop spécial.
J'ai une entrée que je veux validé à chaque pression de touche. Si la validation échoue, l'affichage de l'erreur. N'attendez pas pour le flou de l'événement pour déclencher l' $touché.
Je pensais que c'était le cas par défaut, mais apparemment, il ne l'est pas. Je suis angulaire à l'aide de matériaux ainsi que angulaires des messages. Je suis en train de faire ce pour capslock de détection.
Le balisage:
<form name="primaryLogin" novalidate>
<md-content layout-padding layout="column">
<md-input-container flex>
<label>Login ID</label>
<input type="text" required="" name="login" ng-model="primary.loginID" capslock>
<div ng-messages="primaryLogin.$error">
<div ng-message="required">
Please enter a Login ID.
</div>
<div ng-message="capslock">
Caps Lock is ON!
</div>
</div>
<pre>{{ primaryLogin | json }}</pre>
</md-input-container>
</md-content>
</form>
Quand je suis arrivé à la page, activer le verrouillage des majuscules, et de commencer à taper, mon message d'erreur ressemble à ceci:
{
"$error": {
"capslock": [
{
"$viewValue": "Q",
"$validators": {},
"$asyncValidators": {},
"$parsers": [
null
],
"$formatters": [
null,
null
],
"$viewChangeListeners": [],
"$untouched": false,
"$touched": true,
"$pristine": false,
"$dirty": true,
"$valid": false,
"$invalid": true,
"$error": {
"capslock": true
},
"$name": "login",
"$options": {
"debounce": 100,
"updateOnDefault": true
}
}
]
},
"$name": "primaryLogin",
"$dirty": true,
"$pristine": false,
"$valid": false,
"$invalid": true,
"$submitted": false,
"login": {
"$viewValue": "Q",
"$validators": {},
"$asyncValidators": {},
"$parsers": [
null
],
"$formatters": [
null,
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": false,
"$dirty": true,
"$valid": false,
"$invalid": true,
"$error": {
"capslock": true
},
"$name": "login",
"$options": {
"debounce": 100,
"updateOnDefault": true
}
}
}
Donc cela semble fonctionner comme prévu, mais le message d'erreur ne s'affiche pas jusqu'à ce que le flou de l'événement se déclenche sur cette entrée spécifique.. Donc je peux y aller avec capslock, tapez 10 lettres, l'objet d'erreur dit que le voyant de verrouillage des majuscules erreur est là, mais depuis $touché n'est pas vrai, alors, il ne montre pas.
Une seule fois $touché est défini à true, alors je peux revenir en arrière dans l'entrée et tout fonctionne comme prévu.
Des idées? Merci à l'avance!
capslock
attribut?Le capslock attribut est une coutume de la directive pour capslock de détection. Il dispose de son propre état d'erreur pour afficher les messages.
Remarque : habituellement, lorsque vous voulez forcer les gens à utiliser des minuscules, que vous venez de force de la minuscule à la place de la validation de voir stackoverflow.com/questions/16388562/...
OriginalL'auteur TyMayn | 2015-12-16
Vous devez vous connecter pour publier un commentaire.
Changement
à
Vous pouvez également essayer de
OU
Vous pouvez également club comme si conditionnelle ET vérifier:
ou conditionnelle OU de vérifier:
Essayez les un par un pour trouver celui qui répond à votre cas.
ng-show="primaryLogin.login.$dirty"
a fait le tour. Je l'ai bien que ng-messages gérés sa propre ng-show. Pouvez-vous donner quelques explenation sur pourquoi cela fonctionne?ng-messages commence à montrer des messages d'erreur dès que le chargement de la page. Mais vous ne le voulez. Vous pouvez contrôler le moment de montrer à ces messages d'erreur. $sale signifie que l'utilisateur a interagi avec l'élément. Donc, pour le type de saisie de texte, cela signifie que l'utilisateur a entré un peu de texte (même un seul personnage est pris). Ce n'est PAS flou, de sorte que l'utilisateur peut encore avoir son curseur dans la zone de texte et de garder l'entrée de quelque chose et tout ce qui sera pris par $sale. $touché est l'endroit où l'utilisateur a cliqué sur un contrôle, mais a déménagé sans le relâcher. $vierges de l'est où l'utilisateur n'a pas cliqué/flou d'un contrôle.
stackoverflow.com/questions/50464067/...
OriginalL'auteur Devner
Dans le Pré version 1.0 Angulaire du Matériel (c'est à dire <= v0.11.4), qui a été le cas: Le ng-message est affiché par défaut.
Cependant, la la conception de matériel spec états:
Si vous souhaitez afficher les messages de l'utilisateur avant de l'interaction, vous pouvez ajouter "md-auto-hide='false'" à vos ng-messages directive.
J'ai trouvé cette solution: ici
Gentil, merci 🙂
OriginalL'auteur sung
Vérifier avec
ng-show="primaryLogin.login.$invalid && primaryLogin.login.$touched"
. Cela a fait l'affaire pour moi.OriginalL'auteur Kumar Immanuel
Utilisation md-est-erreur
exampl:
"Lorsque l'expression est évaluée à vrai, l'entrée conteneur aller dans un état d'erreur. Par défaut erroring si l'entrée a été touché et n'est pas valide."
https://material.angularjs.org/1.1.3/api/directive/mdInputContainer
OriginalL'auteur Дмитрий Иващенко