md-有错误的自动完成仅在第一次有效

问题描述 投票:0回答:2

在角度材料演示中,当我测试自动完成浮动标签示例时,它无法正常工作并出现错误

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

  1. 点击“最喜欢的状态”并点击出来>显示错误消息:确定
  2. 刷新页面,点击“最喜欢的状态”,输入“xxx”点击退出>显示错误信息:OK
  3. 现在,不要刷新并重置字段>没有错误消息,但字段是红色的:不适合我,我预计会出现必需的消息错误
  4. 再次输入“xxx”,没有错误信息

您有办法让错误消息正常工作吗?

笨蛋的例子: 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>

谢谢

angularjs md-autocomplete
2个回答
1
投票

似乎是一个错误。

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

针对演示中的情况,我发现的最简单的解决方法是将

ng-if="searchForm.autocompleteField.$touched"
替换为
ng-show
或将其完全删除。


0
投票

我添加了

md-delay="300"
,效果很好并解决了问题。

© www.soinside.com 2019 - 2024. All rights reserved.