ng-messaggi angolari che mostrano solo quando $ toccato è vero

Question

Non sto facendo nulla di troppo speciale.

Ho un input che desidero convalidato con ogni tratto di tasto. Se la convalida fallisce, visualizza l'errore. Non aspettare che l'evento di sfocatura faccia scattare il $ toccato.

Ho pensato che fosse il caso predefinito, ma a quanto pare non lo è. Sto usando materiali angolari insieme a messaggi angolari. Lo sto facendo per il rilevamento di capslock.

Il markup:

<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> 

Quando ho vengo alla pagina, attivare il blocco maiuscole, e iniziare a digitare, il mio messaggio di errore sembra in questo modo:

{ 
    "$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 
    } 
    } 
} 

Quindi questo sembra essere funziona come previsto, ma il messaggio di errore effettivo non viene visualizzato fino a quando l'evento di sfocatura non viene attivato su quell'input specifico. Quindi posso entrare con capslock, digitare 10 caratteri, l'oggetto error dice che l'errore di capslock è presente, ma poiché $ ha toccato non è vero, quindi non mostra.

Una volta $ touched è impostato su true, quindi posso tornare all'input e tutto funziona come previsto.

Qualche idea? Grazie in anticipo!

Answer 1

Change

<div ng-messages="primaryLogin.$error"> 

a

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty"> 

Si può anche provare

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$touched"> 

O

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$pristine"> 

È inoltre possibile club come il modo per condizionale e verificare:

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty && primaryLogin.login.$touched && primaryLogin.login.$pristine"> 

o condizionale o controllare:

<div ng-messages="primaryLogin.$error" ng-show="primaryLogin.login.$dirty || primaryLogin.login.$touched || primaryLogin.login.$pristine"> 

provare il sopra uno per uno per scoprire a seconda di quale si incontra il vostro caso.

Answer 2

Nella versione 1.0 di materiale angolare (ad esempio < = v0.11.4), è il caso: il messaggio ng è stato visualizzato per impostazione predefinita.

Tuttavia, i material design spec stati:

Visualizza testo dell'errore solo dopo l'interazione dell'utente con un campo. Se l'utente immette dati errati, il testo di supporto potrebbe trasformarsi in testo di errore.

Se si desidera visualizzare i messaggi prima dell'interazione dell'utente, è possibile aggiungere "md-auto-hide = 'false'" alla direttiva ng-messages.

<div ng-messages="primaryLogin.$error" md-auto-hide='false'></div> 

ho trovato questa soluzione da: here

Answer 3

Controllare con ng-show="primaryLogin.login.$invalid && primaryLogin.login.$touched". Questo ha fatto il trucco per me.

Answer 4

Usa MD-è-error exampl:

<md-input-container md-is-error="true"> 

"Quando l'espressione data restituisce true, il contenitore di ingresso andrà in stato di errore predefiniti per erroring se l'ingresso è stato toccato ed è valido. ".

https://material.angularjs.org/1.1.3/api/directive/mdInputContainer