
<div class="inputgroup">

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

        role="text" 
        tabindex="1"
        id="{{componentId}}" 
        name="areaText"
        attr.aria-labelledby="{{componentId}}"
        aria-describedby="textAreaDes"
        aria-multiline="true"
        [attr.aria-required]="!allowblank"
        [attr.aria-invalid]="!isValid "

         

         class="input-control"
         [(ngModel)]="value"
         [ngClass]="model.touched ? allowblank ? '' : (isValid && model.touched) ? 'input-control-success' : 'input-control-error' :''" 
         (blur)="onBlurEvent()"
         (focus)="onFocusEvent($event)"
         (input)="onInputEvent($event)"
         (change)="onChangeEv($event)"
         [name]="name"
         [pattern]="regEx"
         [attr.placeholder]="placeholder"
         [attr.rows]="rows"
         [attr.cols]="columns"
         [attr.disabled] = "disabled ? true: null"
         [attr.readonly]="readonly ? true: null"
         [required]="!allowblank">
  </textarea>

  <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="textAreaDes"
        role="tooltip"
        [error-msg]="errormsg"
        [max-error-msg]="maxerrormsg"
        [min-error-msg]="minerrormsg" >
  </input-help>

  <span class="inputfieldbar"></span>
</div>
