带错误的md-autocomplete仅在第一次工作

时间:2016-12-07 16:50:45

标签: angularjs md-autocomplete

在角度材质演示中,当我测试自动完成浮动标签示例时,它无法正确处理错误

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

  1. 点击"最喜欢的州"并点击>显示错误消息:确定
  2. 刷新页面,点击"收藏状态",输入" xxx"并点击>显示错误消息:确定
  3. 现在,不要刷新ant重置字段>没有错误消息,但字段为红色:不适合我,我原本预计会出现所需的消息错误
  4. 输入" xxx"再次,没有错误消息
  5. 您是否有解决方案使错误消息正常工作?

    plunker示例: https://plnkr.co/edit/AmTLs4mbRsxgSNjEKvhn md-autaucomplete字段的代码

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

    感谢

1 个答案:

答案 0 :(得分:1)

似乎是一个错误。

至少有几个相关的错误,例如:https://github.com/angular/material/issues/6767

我在演示中找到的最简单的解决方法是将ng-if="searchForm.autocompleteField.$touched"替换为ng-show或将其完全删除。