„Erforderlich“ Validierung nicht funktioniert in <select> mit Standardwert

Question

Ich habe ein erforderliches <select> Feld:

<select name="service_id" class="Sitedropdown" style="width: 220px;" 
     ng-model="ServiceID" 
     ng-options="service.ServiceID as service.ServiceName for service in services" 
     required> 
    <option value="">Select Service</option> 
</select> 

Wenn es leer ist, sollte das Formular eine Nachricht „Select Service“ Fehler anzuzeigen. Hier ist eine funktionierende plunker.

Es funktioniert gut, wenn Sie absichtlich die leere Option auswählen. Aber wenn Sie die Seite neu laden, ist die service_id standardmäßig leer und es gibt keine Validierung. Wie kann AngularJS den Standardwert validieren?

Answer 1

Ihr Code:

ng-show="myForm.service_id.$dirty && myForm.service_id.$invalid "

Das bedeutet - wenn Wert verschmutzt ist (geändert wurde) und ist ungültig entfernen erste und Sie bekommen, was Sie wollen

Answer 2

Validierungsprüfungen werden nur ausgeführt, nachdem der an ng-model gebundene Wert mindestens einmal geändert wurde, oder, wenn der Benutzer versucht, das Formular zu senden. Wenn dies nicht der Fall wäre, würden alle erforderlichen Felder eines Formulars direkt nach dem Laden der Seite mit einem Fehler angezeigt, was ein ziemlich unerwünschtes Verhalten wäre.

Deshalb wird der Fehler nur angezeigt, wenn Sie etwas anderes auswählen und dann wieder auf den leeren Wert zurücksetzen.