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!

Qu'est-ce que le 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