如何向 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屋！