[Dúvida] HTML menos poluído

Oi Gabriel, tudo bem?

Entendo a sua preocupação em relação à poluição do código HTML. Realmente, muitas vezes, a utilização de muitos elementos pode tornar o código confuso e difícil de ser mantido.

Uma forma de deixar o código mais legível e reduzir a quantidade de elementos no HTML é utilizar uma diretiva personalizada. Com ela, é possível encapsular a lógica necessária para exibir as mensagens de erro em um único elemento, reduzindo a quantidade de elementos necessários no HTML.

Segue um exemplo de como criar uma diretiva personalizada em Angular para exibir mensagens de erro:

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

@Directive({
  selector: '[appMensagemErro]'
})
export class MensagemErroDirective {
  @Input() set appMensagemErro(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) { }
}

Com essa diretiva, você pode utilizar o seguinte código HTML para exibir as mensagens de erro:

<div *ngIf="form.get('campo').invalid">
  <div appMensagemErro="required">Campo obrigatório.</div>
  <div appMensagemErro="minlength">O campo deve ter no mínimo {{ form.get('campo').errors.minlength.requiredLength }} caracteres.</div>
  <div appMensagemErro="maxlength">O campo deve ter no máximo {{ form.get('campo').errors.maxlength.requiredLength }} caracteres.</div>
</div>

Dessa forma, você pode utilizar apenas um elemento div para exibir todas as mensagens de erro do campo, tornando o código HTML mais legível e fácil de ser mantido.

Espero ter ajudado.

Um abraço e bons estudos.