AngularJS ng-Meldungen zeigen Fehler, bevor Form auch auf Bootstrap Form

Question

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

Die minlength und maxlength Fehler zeigen, die richtigen Botschaften und richtig eingestellt ist die "has-Fehler" ng-Klasse berührt wird. Wenn ich jedoch "erforderlich" zu meinem Feld und der entsprechenden Nachricht hinzufüge, erscheint beim erneuten Laden immer "Feld ist erforderlich" (bis zum Ausfüllen).

Die rote Klasse "hat Fehler" wird nicht angezeigt, es sei denn, ein anderer Fehler wird ausgelöst.

Was habe ich hier vermisst?

Answer 1

Ich werde nur ein paar Gotcha's zusammenfassen, die ich bei der Verwendung von ng-messages lief. Ich glaube, diese werden Ihre Frage beantworten und helfen, die Verwendung von ng-messages zu erweitern.

---

mehrere Nachrichten

Die Winkelmeldungen erlauben nur eine Nachricht wird standardmäßig nur die erste Nachricht anzuzeigen, die einen Fehler hat. Sie müssen ng-Nachrichten mitteilen, dass mehrere Nachrichten zulässig sind.

hinzufügen ng-messages-multiple auf Ihre ng-messages Richtlinie

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

Zulassen von ungültigen Werten

Etwas anderes Hinzuzufügen Angular auch nicht immer Eingabe ungültiger Werte zulassen (Es wird automatisch das Feld auf Blur löschen) .

Wenn Sie ungültige Daten ermöglichen und eine Nachricht anzuzeigen, die Sie Ihre Eingabe aktualisieren müssen möglicherweise das Modell zu sagen ungültige Werte zu ermöglichen, mit:

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> 

ausblenden Fehlermeldungen angezeigt, wenn Formularlasten

Wenn Sie die Nachrichten beim Laden des Formulars ausblenden möchten, können Sie das Attribut $touched des Formularfelds verwenden.

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

Answer 2

können Sie ng-hide Einbau-Richtlinie für das Verstecken der Nachricht und ng-Show für Display die Meldung entsprechend