1
resposta

[Sugestão] Uma pratica um pouco mais atual para os campos de errors.

Durante meus estudos, percebi que não é necessário utilizar o método Validators.compose, pois é possível simplificar a configuração das validações da seguinte forma:

autoria: ['', [Validators.required, Validators.minLength(3)]],

Além disso, para evitar a repetição de código no HTML, as mensagens de erro podem ser centralizadas e exibidas de maneira mais limpa, como no exemplo abaixo:

<div *ngIf="formulario.get('autoria')?.errors as errors">
  <ng-container *ngIf="formulario.get('autoria')?.touched">
    <span class="mensagem__erro" *ngIf="errors['minlength']">Autoria precisa conter no mínimo 3 caracteres.</span>
    <span class="mensagem__erro" *ngIf="errors['required']">Campo obrigatório.</span>
  </ng-container>
</div>

Com essa abordagem, o código se torna mais organizado e fácil de manter, especialmente em formulários com várias validações.

Estou usando a versão 18 do angular e adaptando o projeto do curso.

1 resposta

Olá, Rodrigo! Como vai?

Você está absolutamente certo em sua observação. No Angular, especialmente em versões mais recentes, podemos simplificar a definição das validações diretamente no array, como você demonstrou:

Isso torna o código mais conciso e fácil de ler. Quanto à exibição de mensagens de erro, sua abordagem de centralizar e condicionar a exibição das mensagens de erro com base na propriedade touched é excelente. Isso melhora a experiência do usuário, pois evita que mensagens de erro sejam exibidas antes mesmo do usuário interagir com o campo.

Essa abordagem não só mantém o código organizado, mas também garante que as mensagens de erro sejam exibidas de maneira mais amigável, apenas quando necessário. Isso é especialmente útil em formulários com muitos campos e validações.

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)