Question

如何禁用md-autocomplete中的自由文本？我希望用户只能从项目列表中进行选择，或者如果未从列表中选择项目，则根据某些验证添加ng-message。 Angular material md-autocomplete demo

Answer 1

这是可能的，但需要一些解决方法。您基本上是在selectedItemChange和searchTextChange手动执行验证。

function searchTextChange(text) {
  self.form.id.$error.stateMissing = true;
  $log.info('Text changed to ' + text);
}

function selectedItemChange(item) {
  $log.info(self.form.id);
  if (item === null) {
    $log.info('invalid');
  } else {
    $log.info('valid');
    delete self.form.id.$error.stateMissing;
    self.form.id.$validate();
  }
}

错误在stateMissing属性中设置，然后在ng-message标记中使用。设置表单名称非常重要，这样您就可以在控制器中引用该表单。

<form name="ctrl.form" novalidate>
  <p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>
    <md-autocomplete md-autoselect md-select-on-focus md-floating-label="Select a state" ng-disabled="ctrl.isDisabled" cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-input-name="id" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-min-length="0" md-selected-item-change="ctrl.selectedItemChange(ctrl.selectedItem)">
      <md-item-template>
        <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
      </md-item-template>
      <md-not-found>
        No states matching "{{ctrl.searchText}}" were found.
        <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
      </md-not-found>
      <div ng-messages="ctrl.form.id.$error">
        <div ng-message="stateMissing">You must select a state</div>
      </div>
    </md-autocomplete>

http://codepen.io/kuhnroyal/pen/eZXXVr

Answer 2

您可以随时将新项目添加到列表中：

<md-autocomplete flex required="required"
                   md-input-name="id"
                   md-selected-item="newItem.item"
                   md-search-text="itemSearch.queryText"
                   md-items="itemin itemSearch.querySearch()"
                   md-item-text="item.name"
                   md-input-minlength="2"
                   md-floating-label="enter here">
    <md-item-template>
                        <span md-highlight-text="itemSearch.queryText"
                md-highlight-flags="^i">{{item.name}}</span>
    </md-item-template>
    <md-not-found>
      Sorry, this is not in our database
    </md-not-found>
    <div ng-messages="formName.id.$error">
      <div ng-message="required">You must enter a name</div>
      <div ng-message="minlength">You must type at least two characters</div>
    </div>
  </md-autocomplete>

编辑：只需将您的邮件置于<md-not-found>

中

如何禁用角度材质的md-autocomplete组件中的自由文本？

2 个答案: