带有 ngMessage 的 md-chips答案

【问题标题】：md-chips with ngMessage带有 ngMessage 的 md-chips
【发布时间】：2016-02-20 14:29:22
【问题描述】：

我正在尝试将 ngMessages 与 md-chips 角度材料组件一起使用，但我什么也没找到。我试过这个解决方案，但没有奏效，

         <md-input-container md-theme="hs-green" flex set-chips-validity>
          <label class="label">Anno</label>

          <md-chips name="yearInput" required ng-model="vm.offer.year">

            <md-chip-template>
              <span>{{$chip}}</span>
            </md-chip-template>

          </md-chips>

          <div data-ng-messages="insertOfferDetailsForm.yearInput.$error" data-ng-show="insertOfferDetailsForm.yearInput.$dirty">
            <div data-ng-message="required"><span translate="ERROR.FIELD.MANDATORY"></span></div>
          </div>

        </md-input-container>

请帮帮我:)

【问题讨论】：

标签： angularjs angularjs-material

【解决方案1】：

Angular Material Design 文档说验证是待处理的功能，所以我们就等着吧。在此之前，您可以使用此快速解决方案。

<md-chips ng-model="vm.offer.year">

由于这个模型包含一个数组，您可以检查它的长度并使用它来显示验证

<span ng-show="vm.offer.year.length == 0"> This field is required. </span>

这样你可以定义芯片的最小长度，md-max-chips 是最大长度。

工作示例。 http://codepen.io/next1/pen/BKzgrY

【讨论】：

感谢您的回答，我已经实施了类似的解决方案。如果你想看的话。这里是pastebin.com/vSmmAqmi
看起来有点复杂。您实际上不需要将md-input-container 与md-chips 一起使用。
好的。在下一次重构中，我将删除不必要的标签。谢谢大家:)
完全没有问题。

【解决方案2】：

节目在点击之后出现，就像 ng-messages 功能一样。您的代码将始终显示消息，直到chips.model.length！==0 所以，不是一个好的用户界面。尝试包括ng-messages

【讨论】：