1 - Introdução 2 - Conceitos 3 - Criando e executar projetos 4 - Componente 5 - Interpolação de texto 6 - Event binding 7 - Property binding 8 - Diretiva ngIf 9 - Diretiva ngFor 10 - Diretiva ngSwitch 11 - Diretiva ngStyle 12 - Diretiva ngClass 13 - Control Flow 14 - Control Flow condicional 15 - Control Flow laço de repetição 16 - Control Flow estrutura de escolha 17 - Bootstrap 18 - FormsModule (parte 1) 19 - FormsModule (parte 2) 20 - Reactive Forms 21 - Apresentação do projeto 22 - Criar componente do projeto 23 - Strictnullchecks 24 - Criar formulário 25 - Criar tabela 26 - Implementar formulário reativo 27 - Validators 28 - Criar modelo de pessoa 29 - Mensagens de validação 30 - Propriedade disabled 31 - Visilidade de botões 32 - Criar vetor 33 - Função de cadastro 34 - Função de listagem 35 - Função de seleção 36 - Função de alteração 37 - Função de remoção 38 - Função para cancelar 39 - Considerações

29 - Mensagens de validação

Olá pessoal, na vigésima nona aula do treinamento de Angular 17, iremos implementar as mensagens de validação.

No arquivo HTML, nosso formulário terá a seguinte estrutura:

<form [formGroup]="formulario">
    
    
    @if (formulario.get('nome').hasError('required') && formulario.get('nome').touched) {
        <p class="alert alert-warning">O campo nome precisa ser preenchido.</p>
    }

@if (formulario.get('nome').hasError('minlength') && formulario.get('nome').touched) {
        <p class="alert alert-warning">O campo nome precisa ter pelo menos três caracteres.</p>
    }
    
    @if (formulario.get('idade').hasError('required') && formulario.get('idade').touched) {
        <p class="alert alert-warning">O campo idade precisa ser preenchido.</p>
    }
    
    @if (formulario.get('idade').hasError('min') && formulario.get('idade').touched) {
        <p class="alert alert-warning">A idade mínima é 0.</p>
    }
    
    @if (formulario.get('idade').hasError('max') && formulario.get('idade').touched) {
        <p class="alert alert-warning">A idade máxima é 120.</p>
    }

@if (formulario.get('cidade').hasError('required') && formulario.get('cidade').touched) {
        <p class="alert alert-warning">O campo cidade precisa ser preenchido.</p>
    }

@if (formulario.get('cidade').hasError('minlength') && formulario.get('cidade').touched) {
        <p class="alert alert-warning">O campo cidade precisa ter pelo menos três caracteres.</p>
    }

<input type="text"   name="nome"       placeholder="Nome"    formControlName="nome"   class="form-control">
    <input type="number" name="idade"      placeholder="Idade"   formControlName="idade"  class="form-control">
    <input type="text"   name="cidade"     placeholder="Cidade"  formControlName="cidade" class="form-control">
    <input type="button" value="Cadastrar" class="btn btn-primary">
    <input type="button" value="Alterar"   class="btn btn-primary">
    <input type="button" value="Remover"   class="btn btn-primary">
    <input type="button" value="Cancelar"  class="btn btn-primary">
</form>

Abaixo deixo um vídeo mostrando cada etapa desta aula: