2015-11-18 12 views
8

Sto provando ad usare ngMessages con componenti angolari di md-chips, ma non trovo nulla a riguardo. Ho provato questa soluzione, ma non ha funzionato,md-chips con ngMessage

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

Aiuto, per favore :)

risposta

5

angolare Materiale design documentazione dice che la convalida è in attesa funzione quindi dovremo solo aspettare per questo. Fino ad allora puoi usare questa soluzione rapida.

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

Dato che questo modello contiene una matrice è possibile controllare la lunghezza e usarlo per mostrare la convalida come

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

questo modo è possibile tipo di definire la lunghezza minima per i chip e md-max-chips è lì per max -lunghezza.

esempio di lavoro. http://codepen.io/next1/pen/BKzgrY

+0

Grazie per la risposta, ho già implementato una soluzione simile. Se vuoi guardarlo. Qui è http://pastebin.com/vSmmAqmi – ptesser

+0

sembra un po 'complesso. In realtà non è necessario usare 'md-input-container' con' md-chips'. – nextt1

+0

Ok. Durante il prossimo refactor andrò a rimuovere tag non necessari. Grazie a tutti :) – ptesser

0

lo spettacolo viene dopo il clic proprio come la funzionalità ng-messages. il codice della tua volontà visualizzerà sempre il messaggio fino a chips.model.length! == 0 quindi, non una buona UI .try compresi i messaggi ng