Il messaggio di errore angolare lampeggia molto brevemente sullo schermo quando si utilizza lo ui-date datepicker di angular-ui

Question

Si è verificato un problema in cui ng-message sta lampeggiando il messaggio di errore "richiesto" nonostante ci sia stato input nella casella di input. Quello che succede è che lampeggia molto brevemente il messaggio di errore: "QUESTO CAMPO E 'RICHIESTO (TUTTO IN MAIUSCOLO PER FACILITARE A FACILMENTE VEDERLO FLASH BY!)" Sullo schermo prima che scompaia immediatamente. Scusa per i tappi ma volevo rendere il messaggio più facile da vedere prima che scompaia.

Ecco uno link to my plunker. Immettere qualsiasi input, quindi fare clic altrove nella pagina in modo che il campo di input non venga messo a fuoco. Prestare attenzione perché il messaggio di errore in rosso lampeggerà brevemente per poi scomparire. Se non hai notato il messaggio flash velocemente, dovrai ricaricare nuovamente la pagina per vederlo accadere di nuovo.

Perché sta succedendo? Credo che abbia qualcosa a che fare con ui-date perché non sono in grado di replicare il problema senza ui-date.

Ecco un frammento del codice:

<form name="reportform" ng-submit="process_form()" novalidate > 
    <input name="startdate" placeholder="Enter a start date" ui-date ng-model="startdatevalue" required> 
    <ng-messages ng-if='reportform.startdate.$touched' for="reportform.startdate.$error"> 
    <ng-message when="required" class="error-message"> 
     THIS FIELD IS REQUIRED (ALL IN CAPS TO MAKE IT EASIER TO SEE IT FLASH BY!) 
    </ng-message> 
    </ng-messages> 
    <button ng-disabled="reportform.$invalid" type="submit"> 
    Submit Query 
    </button> 
</form> 

Grazie per il vostro aiuto.

Answer 1

provare con quel:

<ng-messages ng-if='reportform.startdate.$touched && reportform.startdate.$modelValue' for="reportform.startdate.$error"> 
     <ng-message when="required" class="error-message" > 
      THIS FIELD IS REQUIRED (ALL IN CAPS TO MAKE IT EASIER TO SEE IT FLASH BY!) 
     </ng-message> 
     </ng-messages> 

solo controllando che il modelValue non è nullo prima di sparare l'errore.

io vi proponiamo durante dev anche per controllare i valori nel modello:

<pre>reportform.startdate.$error = {{reportform.startdate | json }}</pre> 

Answer 2

appena tagliato verso il basso un po '. Ricorda anche dots in ng-models!, qualcosa su cui riflettere.

<form name="reportform" ng-submit="process_form()" novalidate> 
    <input name="startdate" placeholder="Enter a start date" ui-date ng-model="startdatevalue" required> 
    <ng-messages for="reportform.startdate.$error"> 
    <ng-message when="required" class="error-message"> 
     THIS FIELD IS REQUIRED (ALL IN CAPS TO MAKE IT EASIER TO SEE IT FLASH BY!) 
    </ng-message> 
    </ng-messages> 
</form> 

Vedere se questo lo risolve, non l'ho provato però.

Answer 3

Quello che succede è che $touched viene aggiornato quando si preme il mouse su una data nel selettore, ma il modello non viene aggiornato fino a dopo il mouse. Questo è ovvio se fai clic sulla data e tieni premuto il pulsante del mouse.

Un modo (certamente hacky) per ovviare a questo problema consiste nell'utilizzare le opzioni ui-date per verificare se il selettore di date è stato chiuso e utilizzarlo nello ng-messagesng-if.

... ui-date="dateOptions" ng-model="startdatevalue" required> 

<ng-messages ng-if='reportform.startdate.$touched && selectionComplete' for="reportform.startdate.$error"> 

con il seguente nel controller

$scope.dateOptions = { 
    onClose: function() { 
     $scope.$apply(function(){ 
     $scope.selectionComplete = true; 
     }) 
    } 
} 

---

plnkr Aggiornato - https://plnkr.co/edit/vgfI8lTnkhDMU0yJ1FTA?p=preview

---

Solo una breve nota che la pagina Github (https://github.com/angular-ui/ui-date) raccomanda l'ui-bootstrap datario in alternativa.

Answer 4

Ok, questo può o non può essere rilevante per la visualizzazione del messaggio di errore specifico, e sembra essere una soluzione quando viene utilizzato solo il template.Tuttavia, dopo aver provato un certo numero di cose mi sono imbattuto:

ng-cloak 

Dalla documentazione:

La direttiva ngCloak è usato per prevenire il modello HTML angolare venga visualizzato brevemente dal browser nella sua cruda (non compilato) durante il caricamento dell'applicazione. Utilizzare questa direttiva per evitare l'effetto sfarfallio indesiderato causato dalla visualizzazione del template html.

Ho aggiunto questo a ciascuno dei miei ngMessages div e l'errore lampeggiante brevemente andato via, ha senso.