Most elegant Angular directive for forms validation feedback

form-feedback.directive.ts

import { Directive, DoCheck, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { ControlContainer } from '@angular/forms';

@Directive({
  selector: '[appFormFeedback]',
})
export class FormFeedbackDirective implements DoCheck {
  @Input('appFormFeedback') fieldName: string;
  @Input('appFormFeedbackError') errorType: string;

  constructor(
    private parent: ControlContainer,
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef
  ) {}

  ngDoCheck(): void {
    const control = this.parent.control?.get(this.fieldName);
    const feedbackVisible = control?.touched && !!control?.errors?.[this.errorType];
    this.toggleTemplateView(feedbackVisible);
  }

  private toggleTemplateView(visible: boolean): void {
    if (visible && this.viewContainerRef.length === 0) {
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    } else if (!visible && this.viewContainerRef.length > 0) {
      this.viewContainerRef.clear();
    }
  }
}

form.component.html

<div class="form-group">
  <label>Name<span class="text-red-500">*</span></label>
  <input formControlName="name" type="text" class="form-control">
  <div *appFormFeedback="'name'; error:'required'" class="form-control-feedback">
    Name is required
  </div>
</div>