
<div class="inputgroup">

  <label *ngIf="hasLabel"  role="email" for="{{componentId}}" id="{{componentId}}" [style.font-style]="fontstyle" [style.font-family]="fontfamily" [style.font-size]="fontsize">
    {{fieldlabel}}
  <ng-container *ngIf="(fieldlabel != '' && !allowblank && iconfeedback); else elseblock">
    <span style="color: red">*</span>
    <ng-template #elseBlock>
      <span></span>
    </ng-template>
  </ng-container>
  </label> 

  <input type="email" 
  autocomplete="off"
        role="email" 
        tabindex="1"
        id="{{componentId}}" 
        name="emailText"
        attr.aria-labelledby="{{componentId}}"
        aria-describedby="emailDes"
        [attr.aria-disabled]="disabled ? true: null"
        [attr.aria-required]="!allowblank"
        [attr.aria-invalid]="!isValid "
        [attr.readonly]="readonly ? true: null"        
         class="input-control"
         [ngClass]="model.touched ? allowblank ? '' : (isValid && model.touched) ? 'input-control-success' : 'input-control-error' :''"
         [(ngModel)]="value"
         (blur)="onBlurEvent()"
         (focus)="onFocusEvent($event)"
         (input)="onEmailInputEvent($event)"
         (change)="onChangeEvent($event)"
         [name]="name"
         [pattern]="regEx"
         [attr.placeholder]="placeholder"
         [attr.disabled] = "disabled ? true: null"
         [required]="!allowblank"/>

         <ng-container *ngIf="iconfeedback">
          <span class="input-control-feedback">
              <span *ngIf="!isValid && model.touched"><em class="fa fa-times"></em></span>
              <span *ngIf="isValid && model.touched"><em class="fa fa-check"></em></span>
          </span>
      </ng-container>
    
      <input-help *ngIf="showToolTip && enablepopover"
      id="emailDes" 
      role="tooltip"
      [error-msg]="errormsg">
      </input-help>
     
      <span class="inputfieldbar"></span>
    </div>
