md-form-builder/src/controls/mdfbChips.html

AngularJS - Material Design - Form Builder

<div>
  <input type="hidden" name="{{field.name}}" ng-model="field.value">

  <md-input-container ng-class="{ 'md-input-invalid' : form[field.name].$invalid && form[field.name].$touched }">
    <label ng-bind-html="field.title"></label>

    <md-chips
      ng-model="field.value"
      ng-if="!field.transformFunc"
      ng-init="$parent[field.name] = []"
      placeholder="Type to add option"
      md-add-on-blur="true"
      readonly="field.settings.disabled || globals.viewModeOnly"></md-chips>

    <md-chips
      ng-model="field.value"
      ng-if="field.transformFunc"
      ng-init="$parent[field.name] = []"
      md-transform-chip="transformFunc($chip)"
      placeholder="Type to add option"
      md-add-on-blur="true"
      readonly="field.settings.disabled || globals.viewModeOnly">
      <md-chip-template>
        <span ng-style="!$chip.valid && {'color':'red'}">
          <strong>{{$chip.code}}</strong>
          <em ng-if="$chip.valid">({{$chip.text}})</em>
          <em ng-if="!$chip.valid">(Not Valid)</em>
        </span>
      </md-chip-template>
    </md-chips>

    <div ng-messages="form[field.name].$error" ng-show="form[field.name].$invalid && form[field.name].$touched">
      <div ng-message="chipsRequired">Atleast one value is required</div>
      <div ng-message="chipsInvalid">All codes must be valid</div>
      <div ng-repeat="validation in field.validation" ng-message-exp="[validation.key]">{{validation.message}}</div>
    </div>
  </md-input-container>
</div>