AngularJS NG-messaggi mostra errore prima forma è nemmeno toccato forma Bootstrap

Question

errori

<div class="form-group" ng-class="{'has-error': claimForm.consigneeID.$invalid && claimForm.consigneeID.$touched}"> 
<label class="label-bold">Consignee ID</label><br> 
<input name="consigneeID" ng-model="coId" type="number" ng-maxlength="5" ng-minlength="5" class="form-control input-sm" required> 
<div class="help-block" ng-messages="claimForm.consigneeID.$error" role="alert"> 
    <div ng-message="required">Field is required.</div> 
    <div ng-message="minlength">Too few digits.</div> 
    <div ng-message="maxlength">Over 5 digits.</div>   
</div> 

Il MINLENGTH e maxlength mostrano i messaggi corretti e impostata correttamente il "has-errore" ng-class. Tuttavia, se aggiungo "required" al mio campo e il messaggio corrispondente, al ricaricamento, "Field is required" appare sempre (fino al completamento).

La classe "ha errore" rossa non viene visualizzata, tuttavia, a meno che non si verifichi un errore diverso.

Cosa mi sono perso qui?

Answer 1

Sto per riassumere un paio di cose che ho incontrato quando ho utilizzato ng-messages. Credo che questi risponderanno alla tua domanda e ti aiuteranno a espandere l'uso di ng-messages.

---

messaggi multipli

I messaggi angolari consentono solo un messaggio di default viene visualizzato solo il primo messaggio che contiene un errore. Devi dire a ng-messages di consentire più messaggi.

Aggiungi ng-messages-multiple alla direttiva ng-messages

<div class="help-block" ng-messages-multiple 
    ng-messages="claimForm.consigneeID.$error" role="alert"> 

Consentire i valori non validi

Qualcos'altro la pena di aggiungere angolare, inoltre, non sempre consente l'ingresso di valori non validi (Si cancella automaticamente il campo sulla sfocatura) .

Se si desidera consentire dati non validi e visualizzare un messaggio che potrebbe essere necessario aggiornare il vostro contributo a dire il modello per consentire valori non validi utilizzando:

ng-model-options="{ allowInvalid: true}"

<input name="consigneeID" ng-model="coId" 
    ng-model-options="{ allowInvalid: true}" 
    type="number" 
    ng-maxlength="5" ng-minlength="5" 
    class="form-control input-sm" required> 

Messaggi Nascondi Errore di visualizzazione quando Carichi modulo

Se si desidera nascondere i messaggi quando il modulo viene caricato, è possibile utilizzare l'attributo $touched del campo modulo.

<div class="help-block" ng-messages-multiple 
     ng-show="claimForm.consigneeID.$touched" 
     ng-messages="claimForm.consigneeID.$error" role="alert"> 

Answer 2

è possibile utilizzare ng-nascondere direttiva built-in per nascondere il messaggio e-ng mostrano per la visualizzazione del messaggio di conseguenza