md-chips with ngMessage

Question

I'm trying to use ngMessages with md-chips angular materials component, but I don't find nothing about it. I've tried this solution, but didn't work,

         <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>

Help me, please :)

Answer 1

Angular Material Design Documentation says that validation is pending feature so we'll just wait for that. Till then you can use this quick solution.

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

Since this model contains an array you can check its length and use it to show validation like

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

This way you can kind of define the minimun length for chips and md-max-chips is there for max-length.

working example. http://codepen.io/next1/pen/BKzgrY