angularjs – 如何将验证属性添加到md-autocomplete angular mat

发布时间：2020-12-17 07:29:09 所属栏目：安全来源：网络整理

导读：我正在使用版本0.7.1的角度材料.我正在使用此处描述的自动完成功能： Autocomplete demo 但是,它似乎不支持验证逻辑,即使它生成textarea： Autocomplete directive documentation 我想我可以在querySearch函数中添加逻辑来将ng-valid切换为ng-invalid.它是否

我正在使用版本0.7.1的角度材料.我正在使用此处描述的自动完成功能：
Autocomplete demo

但是,它似乎不支持验证逻辑,即使它生成textarea：
Autocomplete directive documentation

我想我可以在querySearch函数中添加逻辑来将ng-valid切换为ng-invalid.它是否正确？如果是这种情况,那么我需要一个关于md-autocomplete的句柄,但这很难,因为name属性被删除了.

快速更新,获得Angular Material网站上的解决方案(最新版本1.0.0-),
https://material.angularjs.org/latest/demo/autocomplete.

您会发现现在支持’required’和’ng-messages’.

<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
<md-content class="md-padding">
<form ng-submit="$event.preventDefault()" name="searchForm">
  <p>The following example demonstrates floating labels being used as a normal form element.</p>
  <div layout-gt-sm="row">
    <md-input-container flex>
      <label>Name</label>
      <input type="text"/>
    </md-input-container>
    <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-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="minlength">Your entry is not long enough.</div>
        <div ng-message="maxlength">Your entry is too long.</div>
      </div>
    </md-autocomplete>
  </div>
</form>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!