I have an autocomplete control (Angular Material version 1.1.2) with md-require-match=true and a validation message
<md-autocomplete required
md-no-cache="true"
md-select-on-match = "true"
md-selected-item="vm.selectedItem"
md-search-text="vm.searchText"
md-items="country in vm.querySearch(vm.searchText)"
md-item-text="country.nm"
md-min-length="2"
md-selected-item-change="vm.updateOrgCountry(country.cd)"
md-require-match = "true"
md-input-name="countryField"
md-match-case-insensitive = "true"
md-floating-label="Country">
<md-item-template>
<span md-highlight-text="vm.searchText" md-highlight-flags="^i">{{country.nm}}</span>
</md-item-template>
<md-not-found>
No Countries matching "{{vm.searchText}}" were found.
</md-not-found>
<div ng-messages="orgForm.countryField.$error">
<div ng-message="required"></div>
<div ng-message="md-require-match">Country not found.</div>
</div>
</md-autocomplete>
When I first enter the control and start typing everything works as expected. If I don't select an item from the list and then move away from the control I get the "Country not found" error message.
However if I go back to the control and start typing again I get the "Country not found" error message after every key press until I select something from the list. I don't want this behaviour as the user should be seeing an error while still entering data.
Is there a way to configure the autocomplete control to only validate for a match as the control loses focus?