dialogField.html

<div ng-show="vm.dialogField.visible"
     class="form-group"
     ng-class="{'has-error': vm.validation.isValid === false}">

  <label class="col-sm-3 control-label">
    {{ ::vm.dialogField.label }}
    <i class="fa fa-info-circle primary help-icon"
       ng-if="vm.dialogField.description"
       tooltip-append-to-body="true"
       uib-tooltip="{{ vm.dialogField.description }}"
       tooltip-placement="auto top">
    </i>
  </label>

  <div ng-switch on="vm.dialogField.type">
    <div class="col-sm-4" ng-switch-when="DialogFieldTextBox">
      <input ng-model="vm.dialogField.default_value"
             ng-disabled="vm.isFieldDisabled()"
             ng-change="vm.changesHappened()"
             ng-model-options="{debounce: {'default': 500}}"
             class="form-control"
             type="{{ vm.dialogField.options.protected ? 'password' : 'text' }}"
             uib-tooltip="{{ ::inputTitle }}"
             value="{{ vm.dialogField.values }}"
             id="{{ vm.dialogField.name }}">

      <div ng-if="vm.validation.isValid === false">{{ vm.validation.message }}</div>
    </div>

    <div class="col-sm-8" ng-switch-when="DialogFieldTextAreaBox">
      <textarea ng-model="vm.dialogField.default_value"
                ng-disabled="vm.isFieldDisabled()"
                ng-change="vm.changesHappened()"
                ng-model-options="{debounce: {'default': 500}}"
                class="form-control"
                style="resize: vertical"
                uib-tooltip="{{ ::inputTitle }}"
                rows="4"
                id="{{ vm.dialogField.name }}">{{ vm.dialogField.default_value }}
      </textarea>

      <div ng-if="vm.validation.isValid === false">{{ vm.validation.message }}</div>
    </div>

    <div class="col-sm-1" ng-switch-when="DialogFieldCheckBox">
      <input ng-model="vm.dialogField.default_value"
             ng-true-value="'t'"
             ng-false-value="'f'"
             ng-disabled="vm.isFieldDisabled()"
             ng-change="vm.changesHappened()"
             type="checkbox"
             uib-tooltip="{{ ::inputTitle }}"
             id="{{ vm.dialogField.name }}">

      <div ng-if="vm.validation.isValid === false">{{ vm.validation.message }}</div>
    </div>

    <div class="col-sm-4" ng-switch-when="DialogFieldDropDownList">
      <select miq-select
              data-live-search="true"
              ng-if="!vm.dialogField.options.force_multi_value"
              ng-model="vm.dialogField.default_value"
              watch-model="vm.dialogField.values"
              ng-change="vm.changesHappened()"
              ng-disabled="vm.isFieldDisabled()"
              class="form-control"
              data-container="body"
              id="{{ vm.dialogField.name }}"
              ng-options="value[0] as value[1] for value in vm.dialogField.values"
              miq-options="{ 'data-tokens': value[0] + ' ' + value[1] }"
      ></select>

      <select miq-select multiple
              data-live-search="true"
              data-container="body"
              ng-if="vm.dialogField.options.force_multi_value"
              ng-model="vm.dialogField.default_value"
              watch-model="vm.dialogField.values"
              ng-change="vm.changesHappened()"
              ng-disabled="vm.isFieldDisabled()"
              input-id="{{ vm.dialogField.name }}"
              ng-options="value[0] as value[1] for value in vm.dialogField.values"
              miq-options="{ 'data-tokens': value[0] + ' ' + value[1] }"
      ></select>

      <div ng-if="vm.validation.isValid === false">{{ vm.validation.message }}</div>
    </div>

    <div class="col-sm-6" ng-switch-when="DialogFieldTagControl">
      <select miq-select
              ng-if="vm.dialogField.options.force_single_value"
              ng-model="vm.dialogField.default_value"
              watch-model="vm.dialogField.values"
              ng-change="vm.changesHappened()"
              ng-disabled="vm.isFieldDisabled()"
              class="form-control"
              data-container="body"
              id="{{ vm.dialogField.name }}"
              ng-options="fieldValue.id as fieldValue.description for fieldValue in vm.dialogField.values"
      ></select>

      <select miq-select multiple
              data-container="body"
              ng-if="!vm.dialogField.options.force_single_value"
              ng-model="vm.dialogField.default_value"
              watch-model="vm.dialogField.values"
              ng-change="vm.changesHappened()"
              ng-disabled="vm.isFieldDisabled()"
              class="form-control"
              id="{{ vm.dialogField.name }}"
              ng-options="fieldValue.id as fieldValue.description for fieldValue in vm.dialogField.values"
      ></select>

      <div ng-if="vm.validation.isValid === false">{{ vm.validation.message }}</div>
    </div>

    <div class="col-sm-6" ng-switch-when="DialogFieldRadioButton">
      <span ng-if="vm.dialogField.read_only || vm.inputDisabled">
        <label class="radio-inline">{{ vm.parsedOptions[vm.dialogField.name] }}</label>
      </span>

      <span ng-if="vm.dialogField.read_only === false || vm.inputDisabled === false">
        <label class="radio-inline"
               ng-repeat="fieldValue in vm.dialogField.values">
          <input type="radio"
                 ng-model="vm.dialogField.default_value"
                 ng-change="vm.changesHappened()"
                 ng-disabled="vm.isFieldDisabled()"
                 name="{{ vm.dialogField.name }}"
                 value="{{ ::fieldValue[0] }}"
                 id="{{ vm.dialogField.name }}"/>
          {{ ::fieldValue[1] }}
        </label>
      </span>

      <div ng-if="vm.validation.isValid === false">{{ vm.validation.message }}</div>
    </div>

    <div class="col-sm-4" ng-switch-when="DialogFieldDateControl">
      <p class="input-group">
        <input uib-datepicker-popup="MM/dd/yyyy"
               type="text"
               class="form-control"
               ng-model="vm.dialogField.default_value"
               ng-change="vm.changesHappened()"
               is-open="open"
               min-date="vm.minDate"
               datepicker-options="vm.dateOptions"
               close-text="{{'Close'|translate}}"/>
        <span class="input-group-btn">
          <button type="button"
                  class="btn btn-default"
                  ng-click="open = !open">
            <i class="fa fa-calendar"></i>
          </button>
        </span>
      </p>

      <div ng-if="vm.validation.isValid === false">{{ vm.validation.message }}</div>
    </div>

    <div class="col-sm-4" ng-switch-when="DialogFieldDateTimeControl">
      <div class="dateTimePadding">
        <p class="input-group">
          <input uib-datepicker-popup="MM/dd/yyyy"
                 type="text"
                 class="form-control"
                 ng-model="vm.dialogField.dateField"
                 ng-change="vm.dateTimeFieldChanged()"
                 is-open="open"
                 min-date="vm.minDate"
                 datepicker-options="vm.dateOptions"
                 close-text="{{'Close'|translate}}"
                 id="{{ vm.dialogField.name }}"/>
          <span class="input-group-btn">
            <button type="button"
                    class="btn btn-default"
                    ng-click="open = !open">
              <i class="fa fa-calendar"></i></button>
          </span>
        </p>
      </div>
      <div uib-timepicker
           ng-model="vm.dialogField.timeField"
           ng-change="vm.dateTimeFieldChanged()">
      </div>

      <div ng-if="vm.validation.isValid === false">{{ vm.validation.message }}</div>
    </div>
  </div>

  <div class="col-sm-1"
        ng-if="vm.dialogField.dynamic && vm.dialogField.show_refresh_button && vm.inputDisabled===false">
    <button type="button"
            class="btn btn-default"
            ng-click="vm.refreshSingleField()">
      <i class="fa fa-refresh" uib-Tooltip="{{'Refresh field'|translate}}"></i>
    </button>
  </div>

  <div class="col-sm-1" ng-show="vm.dialogField.fieldBeingRefreshed">
    <div class="spinner spinner-xs spinner-inline"></div>
  </div>
</div>