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

前端之家收集整理的这篇文章主要介绍了angularjs – 如何将验证属性添加到md-autocomplete angular material指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用版本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>
原文链接:https://www.f2er.com/angularjs/142137.html

猜你在找的Angularjs相关文章