<ng-template #fieldTypeTemplate>
  <div
    class="input-group"
    [class.has-validation]="showError"
  >
    <div
      class="input-group-addon"
      [class.input-group-btn]="props.addonLeft.onClick"
      *ngIf="props.addonLeft"
      (click)="addonLeftClick($event)"
    >
      <i
        [ngClass]="props.addonLeft.class"
        *ngIf="props.addonLeft.class"
      ></i>
      <span *ngIf="props.addonLeft.text">{{ props.addonLeft.text }}</span>
    </div>
    <div class="flex-grow">
      <ng-container #fieldComponent></ng-container>
    </div>
    <div
      class="input-group-addon"
      [class.input-group-btn]="props.addonRight.onClick"
      *ngIf="props.addonRight"
      (click)="addonRightClick($event)"
    >
      <i
        [ngClass]="props.addonRight.class"
        *ngIf="props.addonRight.class"
      ></i>
      <span *ngIf="props.addonRight.text">{{ props.addonRight.text }}</span>
    </div>
  </div>
</ng-template>