md-autocomplete with errors works the first time only

Question

In angular material demo, when I test the autocomplete floating label example, it doesn't work correctly with errors

https://material.angularjs.org/latest/demo/autocomplete

Click on "favorite state" and click out > error message is displayed : OK
Refresh the page, Click on "favorite state", enter "xxx" and click out > error message is displayed : OK
Now, don't refresh ant reset the field > no error message but the field is red : Not working for me, I would have expected a required message error
enter "xxx" again, no error message

Do you have a solution to make the error messages work correctly ?

plunker example : https://plnkr.co/edit/AmTLs4mbRsxgSNjEKvhn the code of the md-autaucomplete field

<md-autocomplete flex required
        md-input-name="autocompleteField"
        md-input-minlength="2"
        md-input-maxlength="18"
        md-no-cache="ctrl.noCache"
        md-selected-item="ctrl.selectedItem"
        md-search-text="ctrl.searchText"
        md-items="item in ctrl.querySearch(ctrl.searchText)"
        md-item-text="item.display"
        md-require-match
        md-floating-label="Favorite state">
      <md-item-template>
        <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
      </md-item-template>
      <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
        <div ng-message="required">You <b>must</b> have a favorite state.</div>
        <div ng-message="md-require-match">Please select an existing state.</div>
        <div ng-message="minlength">Your entry is not long enough.</div>
        <div ng-message="maxlength">Your entry is too long.</div>
      </div>
    </md-autocomplete>

thanks

reproduce the issue on plunker – Sajeetharan Dec 07 '16 at 16:51 — Sajeetharan, Dec 07 '16 at 16:51

score 1 · Accepted Answer · answered Dec 15 '16 at 09:41

Seems to be a bug.

There are several related bugs at least, for example: https://github.com/angular/material/issues/6767

The easiest workaround I found for the case in the demo is to either replace ng-if="searchForm.autocompleteField.$touched" with ng-show or to remove it completely.

md-autocomplete with errors works the first time only

1 Answers1