如何向 md-autocomplete angular material 指令添加验证属性 [英] How to add validation attributes to md-autocomplete angular material directive
问题描述
我使用的是 0.7.1 版的角度材料.我正在使用此处描述的自动完成功能:自动完成演示
然而,它似乎不支持验证逻辑,即使它生成了一个 textarea:自动完成指令文档
我想我可以在 querySearch 函数中添加逻辑来将 ng-valid 切换为 ng-invalid.这样对吗?如果是这种情况,那么我需要一个关于 md-autocomplete 的句柄,但这很困难,因为 name 属性被删除了.
快速更新,在 Angular Material 站点(最新版本 1.0.0-)上得到了解决方案,https://material.angularjs.org/latest/demo/autocomplete.
您会发现现在支持required"和ng-messages".
<md-content class="md-padding"><form ng-submit="$event.preventDefault()" name="searchForm"><p>以下示例演示了用作标准表单元素的浮动标签.</p><div layout-gt-sm="row"><md-input-container flex><label>名称</label><input type="text"/></md-input-container><md-autocomplete flex 需要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="ctrl.querySearch(ctrl.searchText) 中的项目"md-item-text="item.display"md-floating-label="最喜欢的状态"><md-item-模板><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">您<b>必须</b>有一个最喜欢的状态.<div ng-message="minlength">您输入的内容不够长.</div><div ng-message="maxlength">您的条目太长.</div>
</md-自动完成>
</表单>
I'm using version 0.7.1 of angular material. I'm using the autocomplete as described here: Autocomplete demo
However, it doesn't seem to support validation logic, even though it generates a textarea: Autocomplete directive documentation
I imagine that I can add logic in the querySearch function to switch ng-valid to ng-invalid. Is this correct? If this is the case, then I need a handle on the md-autocomplete, but this is difficult, because the name attribute gets removed.
Quick update, got the solution on Angular Material site (Latest release 1.0.0-), https://material.angularjs.org/latest/demo/autocomplete.
You will find that 'required' and 'ng-messages' are supported now.
<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>
这篇关于如何向 md-autocomplete angular material 指令添加验证属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!