<div class="form-group">
  @if (label) {
    <label [for]="id" [class.active]="!!control.value || !!placeholder">{{ label }}</label>
  }
  <textarea
    [id]="id"
    [rows]="rows"
    [class.form-control]="readonly !== 'plaintext'"
    [class.form-control-plaintext]="readonly === 'plaintext'"
    [class.is-invalid]="isInvalid"
    [class.is-valid]="isValid"
    [placeholder]="placeholder"
    [formControl]="control"
    [readonly]="isReadonly"
    (blur)="markAsTouched()"></textarea>

  @if (description) {
    <small [id]="id + '-description'" class="form-text">{{ description }}</small>
  }
  @if (isInvalid) {
    <div class="form-feedback just-validate-error-label" [id]="id + '-error'">
      <div #customError><ng-content select="[error]"></ng-content></div>
      @if (!customError.hasChildNodes()) {
        {{ invalidMessage | async }}
      }
    </div>
  }
</div>
