使用 md-autocomplete 验证 md-chips答案

【问题标题】：Validation on md-chips with md-autocomplete使用 md-autocomplete 验证 md-chips
【发布时间】：2017-08-11 20:29:05
【问题描述】：

我正在尝试构建一个使用角度材料并使用诸如md-chips 和md-autocomplete 等元素的页面。

我想对这个md-chips进行验证，这样如果没有筹码并且点击提交按钮时会出现错误消息，类似于md-input-container。

对于md-input-container，我的代码如下

<md-input-container class="md-block" flex-gt-sm>
      <label>Title</label>
      <input md-maxlength="100" maxlength="100" required type="text" name="bookTitle" ng-model="bookCtrl.book.name">

      <div ng-messages="bookForm.bookTitle.$error" role="alert">
        <div ng-message-exp="['required', 'maxlength']">
          Book title is required and it should not exceed 100 characters.
        </div>
      </div>
    </md-input-container>

如果不符合验证，则会出现警报。如何使用具有以下代码的md-autocomplete 执行类似于md-chips 的操作

<md-chips name="bookAuthors" ng-model="bookCtrl.book.authors" md-autocomplete-snap
              md-separator-keys="bookCtrl.keys"
              md-transform-chip="bookCtrl.transformChip($chip)"
              md-require-match="bookCtrl.authorAutocompleteRequireMatch">
      <md-autocomplete
        md-selected-item="bookCtrl.selectedAuthor"
        md-search-text="bookCtrl.searchAuthor"
        md-items="author in bookCtrl.querySearch(bookCtrl.searchAuthor, bookCtrl.bookAuthors)"
        md-item-text="author.name"
        placeholder="Author">
        <span md-highlight-text="bookCtrl.searchAuthor">{{author.name}}</span>
      </md-autocomplete>

      <md-chip-template>
        <span>{{$chip.name}}</span>
      </md-chip-template>
    </md-chips>

为了执行验证，可以向md-chips 添加什么内容？

【问题讨论】：

它需要一些定制，在这里查看更多，希望对您有帮助，codepen.io/anon/pen/Veapvm
我刚刚尝试过这个，以进行自定义验证，但它似乎不适用于我所拥有的。

标签： angularjs angular-material requiredfieldvalidator

【解决方案1】：

在 md-chips 块之外创建 div 块并添加红色。它会以类似的方式工作

<div ng-messages="{test:true}" ng-show="true">
    <div ng-message="test" style="color: rgb(221,44,0); font-size:12px">errroro123</div>
</div>

【讨论】：