Validar formulário ao clicar no botão submit e exibir mensagens de erros | Front-end

Oii Renato, tudo bem?

Vou te dar uma luz de como você pode fazer:

Primeiramente, tenha certeza de que seu formulário está utilizando a diretiva ngForm e que cada input está devidamente vinculado a uma diretiva ngModel, além de ter um nome único. Isso é essencial para que o Angular possa rastrear o estado de cada campo individualmente.

No seu componente HTML, você pode adicionar mensagens de erro específicas para cada campo. Por exemplo:

<form #meuForm="ngForm" (ngSubmit)="cadastrar(meuForm)">
  <input type="text" name="email" ngModel required email #email="ngModel">
  <div *ngIf="email.invalid && (email.dirty || email.touched)">
    <div *ngIf="email.errors.required">O campo e-mail é obrigatório.</div>
    <div *ngIf="email.errors.email">Por favor, insira um e-mail válido.</div>
  </div>

  <input type="password" name="senha" ngModel required #senha="ngModel">
  <div *ngIf="senha.invalid && (senha.dirty || senha.touched)">
    <div *ngIf="senha.errors.required">O campo senha é obrigatório.</div>
  </div>

  <button type="submit">Cadastrar</button>
</form>

No seu componente TypeScript, você pode definir o método cadastrar para verificar se o formulário está válido antes de proceder com qualquer ação. Se o formulário estiver inválido, as mensagens de erro já configuradas no HTML serão exibidas automaticamente:

cadastrar(form: NgForm) {
  if (form.invalid) {
    // Aqui você pode adicionar alguma lógica adicional se necessário
    console.log('Formulário inválido');
    return;
  }

  // Lógica de cadastro
}

Com essa configuração, quando o usuário tentar submeter o formulário clicando no botão de cadastro, o Angular automaticamente impedirá a submissão se houver erros e exibirá as mensagens de erro configuradas.

Espero ter ajudado.

Um abraço e bons estudos.