strange behavior using ng-messages inside md-auto-complete

[kfirufk]

Hello.

I'm trying to create an md-auto-complete with ng-messages that will show a required message if the user did not enter a text in the md-auto-complete input field.

I created a jsfiddle at https://jsfiddle.net/kfirufk/zoyxq9g6/3/

first problem, the required error message is shown at all times, even when i enter text in the md-auto-complete text field. in the jsfiddle i also print autocompleteForm.autocomplete.$error that shows that when i type text in the text input, the required error is removed from the returned object.

second problem, if i don't have md-floating-label added to the md-auto-complete, then the ng-messages div is not shown at all.

in general just copied the example on angular material website and modify it a bit.

any ideas ?

using angularjs 1.5.1 with angular material 1.1.0-rc1

[RolandHeath]

Well, this is not a solution, but as a workaround, adding something like
ng-if="autocompleteForm.autocomplete.$error.required"
to your ng-message div seems to work.

This certainly isn't the expected behaviour though, and probably won't solve the issue of it not appearing without floating labels added.

[kfirufk]

welp.. at least for now i have a work-around. thanks

[cairomassimo]

I also encountered similar problems. Should be a duplicate of #7477

You can also add the md-input-message-animation class to the ng-message elements to fix the presentation. See
https://jsfiddle.net/t7e4yfez/2/
and
http://codepen.io/cairomassimo/pen/wGEKPZ

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.