Módulo 15 de 21
🛡️

Módulo 15: Formulários Reativos II (Validações Complexas)

2. Resumo da Aula Anterior

No Módulo 14, aprendemos a estrutura básica dos Formulários Reativos e usamos validadores padrão como required e email. Agora, vamos subir o nível e aprender a criar as nossas próprias regras de validação personalizadas.

3. O Que Vais Aprender Hoje

4. Teoria: Regras por Medida

Conceito: Nem tudo no mundo é apenas um email ou um campo obrigatório. Por vezes precisas de validar se uma senha e a sua confirmação são iguais, ou se um nome de utilizador já existe no servidor. Para isso, criamos funções que o Angular corre automaticamente.

🛂 Analogia: O Segurança do Clube

Imagina que estás a tentar entrar num clube exclusivo:

  • Validadores Padrão: O segurança vê se tens sapatos (Required) e se tens BI (Email).
  • Custom Validator: O segurança tem uma regra especial: "Ninguém que se chame 'Vítor' pode entrar hoje". É uma regra que tu inventaste para aquele caso específico.
  • Cross-field Validation: O segurança olha para ti e para o teu amigo e diz: "Só podem entrar se ambos tiverem gravata da mesma cor". Ele não olha só para uma pessoa, olha para o par (Grupo).
  • Async Validator: O segurança tira uma foto do teu BI e manda para a central para ver se tens antecedentes. Ele espera pela resposta da central antes de te deixar passar.

5. Exemplos Práticos

Exemplo 1: Validador Personalizado

Uma função simples que proíbe a palavra "admin".

function proibidoAdmin(control: FormControl) {
  if (control.value?.toLowerCase() === 'admin') {
    return { 'nomeProibido': true }; // Se houver erro, devolve objeto
  }
  return null; // Se estiver tudo bem, devolve null
}

// No componente
nome = new FormControl('', proibidoAdmin);

Exemplo 2: Validar Dois Campos (Passwords)

Aplicamos o validador ao Grupo, não ao Campo.

const validadorSenhas = (group: FormGroup) => {
  const senha = group.get('senha')?.value;
  const confirma = group.get('confirma')?.value;
  return senha === confirma ? null : { 'senhasDiferentes': true };
};

meuForm = new FormGroup({
  senha: new FormControl(''),
  confirma: new FormControl('')
}, { validators: validadorSenhas });

Exemplo 3: Usando o FormBuilder

Uma forma mais curta e elegante de escrever formulários.

import { FormBuilder } from '@angular/forms';

constructor(private fb: FormBuilder) {}

form = this.fb.group({
  nome: ['', [Validators.required, proibidoAdmin]],
  contatos: this.fb.group({
    telefone: [''],
    morada: ['']
  })
});

6. Agora é a Tua Vez!

Cria o "Sistema de Verificação de Agente Secreto":

  1. Usa o FormBuilder para criar um formulário com codigoAgente e confirmarCodigo.
  2. Cria um **Custom Validator** que obriga o codigoAgente a começar com as letras "00" (ex: 007).
  3. Adiciona um **Cross-field Validator** para garantir que os dois campos de código são rigorosamente iguais.
  4. Mostra uma mensagem de erro vermelha se o código for inválido ou se as confirmações não baterem certo.
  5. Bónus: Usa o patchValue para preencher automaticamente o código "007" quando o utilizador clica num botão "Sugestão".

7. Verificação de Conhecimento

Carregando quiz...

8. Resumo do Que Aprendemos

9. Desafios Práticos

Desafio 1: O Regresso do Nulo

Num validador personalizado, porque é que devolvemos `null` quando o valor está CORRETO, em vez de `true`?

Desafio 2: Performance Máxima

Imagina um validador assíncrono que verifica se um email existe na BD. Ele deve correr a cada tecla que o utilizador prime?

Desafio 3: Grupo Dinâmico

Se tiveres uma lista de "Habilidades" que o utilizador pode adicionar ou remover dinamicamente (clicando num botão +), que ferramenta usarias dentro do Formulário Reativo?

« Aula Anterior Próxima Aula »