带有ngMessage的md-chips

Question

我正在尝试将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>

请帮帮我 :)

Answer 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