ng-messages does not show message

[amitport]

reproduce:

1 - open http://codepen.io/topherfangio/pen/eJpoZN
2 - enter input>5 and focus out => error message appears
3 - clear the input and focus out => expected "required" message does not appear

Note that it seems that the message div is there but stuck on animation. Manually removing it's md-input-message-animation class in chrome devtools reveals the message.

[0101adm]

+1

[edgaralves]

+1

[mpiasta-ca]

I just came across this issue too. Thought I was doing something wrong in my project. So then I went to angular-material demo and replicated it: https://material.angularjs.org/latest/demo/input

Scroll to "Errors" section:

1. In the "Description" field, enter a really long string like "This is a long string that exceeds the maximum"
2. Now select-all and backspace/delete. Then blur from the field.
3. The field is underlined in red because it has "required" error. But the required error message is not appearing.

[FrancescoRizzi]

But in the same demo block ("Errors"), the very next sample field ("Client Name", required) seems to work?
eg:
focus on it
blur out of it
required error appears (as expected)
focus on it
enter any value
required error already disappear (as expected)
you can even blur out and it's fine.

Could the problem be due to the char counter that appears in both the error scenarios (original code pen Test field, and Description field in the "Errors" demo)?

[mpiasta-ca]

@FrancescoRizzi, the issue appears when there are multiple ng-message error cases for an input field. The "Client Name" field only has a single ng-message error case. The issue happens when one ng-message is removed/hidden, and another ng-message block is supposed to be displayed; but in this case, the subsequent ng-message block is never displayed.

[Zacharias3690]

+1, occurs for me when going from one invalid state to another. When going from invalid -> valid -> invalid, messages work as expected.