2015-11-18 4 views
8

Ich versuche ngMessages mit md-Chips Angular Materials Komponente zu verwenden, aber ich finde nichts darüber. Ich habe diese Lösung versucht, aber hat nicht funktioniert,MD-Chips mit 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> 

Helfen Sie mir, bitte :)

Antwort

5

Angular Material Design-Dokumentation sagt, dass Validierungsfunktion aussteht so dass wir nur darauf warten. Bis dahin können Sie diese schnelle Lösung nutzen.

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

Da dieses Modell ein Array enthält, kann man seine Länge überprüfen und es verwenden, Validierung zu zeigen, wie

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

Auf diese Weise können Sie Art die minimun Länge definieren für Chips und md-max-chips ist für max -Länge.

Arbeitsbeispiel.

+0

Danke für die Antwort, ich bereits implementieren eine ähnliche Lösung. Wenn Sie es sehen wollen. Hier ist es http://pastebin.com/vSmmAqmi – ptesser

+0

sieht irgendwie komplex aus. Sie müssen tatsächlich 'md-input-container' nicht mit' md-chips' verwenden. – nextt1

+0

Ok. Während des nächsten Refactors werde ich unnötige Tags entfernen. Danke für alle :) – ptesser

0

die Show kommt nach dem Klick genau wie die ng-Nachrichten Funktionalität. der Code Ihres Willens wird immer die Nachricht bis chips.model.length! == 0 so, nicht eine gute UI .try einschließlich ng-Nachrichten