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

Ivers

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

Vincenzovincible

Thanks for the answer, I already implement a similiar solution. If you want watch it. Here it is pastebin.com/vSmmAqmi – Ivers

looks kind of complex. You actually don't need to use md-input-container with md-chips. – Vincenzovincible

Ok. During next refactor I'll go to remove unnecessary tag. Thanks for all :) – Ivers

No problem at all. – Vincenzovincible

Answer 2

the show come after the click just like the ng-messages functionality. the code of your will always display the message until chips.model.length!==0 so, not a good UI .try including ng-messages

Mcguigan