Angular error message displays quickly on screen when using angular -ui ui-date datepicker

Question

I ran into a problem when the ng message blinks with a “mandatory” error message, despite the presence of input in the input field. What happens is that he blinks very briefly with the error message: "THIS FIELD IS REQUIRED (EVERYTHING IS IN CAPS TO GET IT TO SEE THIS FLASH !!") On the screen before it disappears right away. Sorry for the caps, but I wanted the message to be easier to see before it disappears.

Here is a link to my plunker . Enter any input, and then click elsewhere on the page so that the input field loses focus. Please note, because a short-term error message flashes briefly and then disappears. If you have not noticed that the message is blinking fast, you will have to reload the page again to see how it happens again.

Why is this happening? I believe this is due to ui-date because I cannot replicate the problem without ui-date.

Here is the code snippet:

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

Thank you for your help.

Answer 1

Well, this may or may not be relevant for your specific error message, and it seems to be a solution when only a template is used. However, after trying a few things, I came across:

 ng-cloak 

From the documentation:

The ngCloak directive is used to prevent the Angular html template from displaying briefly by the browser in its original (not compiled) form during the loading of your application. Use this directive to avoid the unwanted flickering effect caused by the display of the html template.

I added this to each of my ngMessages divs, and the error that blinked quickly went away makes sense.

Answer 2

try with this:

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

Just checking that modelValue is not null before removing the error.

I suggest that you also check the values ​​in the model during dev:

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

Answer 3

Just cut it a little. Also remember the points in ng-models! what to think about.

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

See if this fixes, I have not tested it.

Answer 4

What happens when $touched updated when you hover over the date in the collector, but the model is not updated until you click. This is obvious if you click on the date and hold the mouse button.

One (generally accepted, hacking) way to get around this problem is to use the ui-date options to check if the date picker is closed and use them in ng-messages ng-if .

 ... ui-date="dateOptions" ng-model="startdatevalue" required> <ng-messages ng-if='reportform.startdate.$touched && selectionComplete' for="reportform.startdate.$error"> 

with next controller

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

---

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

---

Just remember that the Github page ( https://github.com/angular-ui/ui-date ) recommends using ui-bootstrap date-picker as an alternative.