<mat-form-field appearance="outline" class="w-100">
  <mat-label>{{ componentTextarea.ETIQUETA }}</mat-label>
  <textarea 
      matInput 
      [id]="componentTextarea.IDENTIFICADOR"
      [name]="componentTextarea.NOMBRE_CAMPO"
      [rows]="componentTextarea.FILAS"
      [placeholder]="componentTextarea.PLACEHOLDER"
      [readonly]="readonly"
      [formControl]="formControl"
      (keyup)="dataValue.emit(this.formControl)">
  </textarea>
  @if (componentTextarea.ICONO !== null) {
      <mat-icon matSuffix>{{ componentTextarea.ICONO }}</mat-icon>
  }
  @if (formControl.hasError('required')) {
      <mat-error [title]="'El campo '+componentTextarea.ETIQUETA+' es obligatorio'">
          El campo <b>{{ componentTextarea.ETIQUETA }}</b> es obligatorio
      </mat-error>
  }

  @if (formControl.hasError('maxlength')) {
      <mat-error [title]="'El campo '+componentTextarea.ETIQUETA+' debe tener una longitud máxima de '+componentTextarea.LONGITUD_CAMPO_MAXIMO">
          El campo <b>{{ componentTextarea.ETIQUETA }}</b> debe tener una longitud máxima de {{ componentTextarea.LONGITUD_CAMPO_MAXIMO }}
      </mat-error>
  }
  @if (formControl.hasError('minLength')) {
      <mat-error [title]="'El campo '+componentTextarea.ETIQUETA+' debe tener una longitud mínima de '+componentTextarea.LONGITUD_CAMPO_MINIMO">
          El campo <b>{{ componentTextarea.ETIQUETA }}</b> debe tener una longitud mínima de {{ componentTextarea.LONGITUD_CAMPO_MINIMO }}
      </mat-error>
  }
  @if (formControl.hasError('max')) {
      <mat-error [title]="'El campo '+componentTextarea.ETIQUETA+' es obligatorio'">
          El campo <b>{{ componentTextarea.ETIQUETA }}</b> debe tener un valor máximo de {{ componentTextarea.LONGITUD_CAMPO_MAXIMO }}
      </mat-error>
  }
  @if (formControl.hasError('min')) {
      <mat-error [title]="'El campo '+componentTextarea.ETIQUETA+' es obligatorio'">
          El campo <b>{{ componentTextarea.ETIQUETA }}</b> debe tener un valor mínimo de {{ componentTextarea.LONGITUD_CAMPO_MAXIMO }}
      </mat-error>
  }
  @if (formControl.hasError('pattern')) {
      <mat-error [title]="componentTextarea.MENSAJE_ERROR_VALIDACION">
          {{ componentTextarea.MENSAJE_ERROR_VALIDACION }}
      </mat-error>
  }

  @if (!hasPermission) {
      <mat-hint>No tiene permiso para modificar este campo</mat-hint>
  } 
</mat-form-field>