<!-- <div class="input-group generic-input-group"> -->
<form [formGroup]="form" class="generic-input-group">
  <div class="form-group app-control-input">
    <label for="generic_input" *ngIf="label">{{label}}</label>
    <i class="material-icons icon-position" *ngIf="icon">
      {{icon}}
    </i>
    <input [type]="inputType" formControlName="generic_input" class="form-control"
      [ngClass]="{'is-invalid' : form.controls.generic_input.errors && form.controls.generic_input.touched}"
      [ngClass]="{'input-pad' : icon}" [placeholder]="placeholder" (input)="onInput(form.get('generic_input').value)"
      (keydown.enter)="onSubmit()" />
    <div *ngIf="form.controls.generic_input.errors && form.controls.generic_input.touched" class="invalid-feedback">
      <div class="generic-input-error-msg" *ngIf="form.controls.generic_input.errors.required">
        {{campoObrigatorioMsg || 'Campo obrigatório'}}
      </div>
      <div class="generic-input-error-msg" *ngIf="form.controls.generic_input.errors.extra">
        {{msgErroExtra}}
      </div>
    </div>
    <!-- <div *ngIf="msgErroExtra !== null && msgErroExtra !== undefined" class="generic-input-extra-error-msg">
      {{msgErroExtra}}
    </div> -->
    <div class="input-group-append generic-input-submit-button">
      <button class="btn {{btnClass}}" type="button" id="button-addon2" (click)="onSubmit()">
        {{buttonLabel}}
      </button>
    </div>
  </div>
</form>