Módulo 14: Formulários Reativos I (Estrutura e Validação)
2. Resumo da Aula Anterior
No Módulo 13, fechamos o ciclo CRUD com pedidos POST, PUT e DELETE. Agora, precisamos de uma forma profissional de recolher esses dados do utilizador. Entra o mundo dos Formulários Reativos.
3. O Que Vais Aprender Hoje
- ✅ A diferença entre Template-Driven e Reactive Forms.
- ✅ Criar controlos individuais com FormControl.
- ✅ Agrupar campos com FormGroup.
- ✅ Aplicar validações básicas (Obrigatório, Email, Tamanho).
4. Teoria: O Controlo é Teu
Conceito: Nos Formulários Reativos, tu crias a árvore do formulário no código TypeScript. Isto dá-te controlo total sobre o estado do campo (está sujo? está válido? mudou o valor?) sem dependeres apenas do HTML.
✍️ Analogia: O Formulário das Finanças vs O Caderno de Notas
Imagina dois tipos de formulários:
- Template Driven (O Caderno): Tu escreves no papel e só quando entregas é que alguém vê se está bem. O papel (HTML) manda.
- Reactive Forms (As Finanças Online): À medida que escreves cada letra, há um sistema informático (TypeScript) a validar em tempo real. O sistema sabe exatamente em que campo estás e pode bloquear o botão "Enviar" no mesmo milissegundo em que cometes um erro.
5. Exemplos Práticos
Exemplo 1: Setup da Classe
Importar o ReactiveFormsModule e definir a estrutura.
import { FormGroup, FormControl, Validators } from '@angular/forms';
meuForm = new FormGroup({
nome: new FormControl('', Validators.required),
email: new FormControl('', [Validators.required, Validators.email])
});
submit() {
console.log(this.meuForm.value);
}Exemplo 2: Ligação ao HTML
Usar a diretiva formGroup e formControlName.
<form [formGroup]="meuForm" (ngSubmit)="submit()">
<input formControlName="nome" placeholder="Nome">
<input formControlName="email" placeholder="Email">
<button type="submit" [disabled]="!meuForm.valid">Enviar</button>
</form>Exemplo 3: Mostrar Erros
Avisar o utilizador de forma amigável.
<div *ngIf="meuForm.get('email')?.errors?.['email']">
Este email não é válido!
</div>6. Agora é a Tua Vez!
Vamos criar o "Formulário de Registo Heróico":
- Importa o
ReactiveFormsModuleno teu componente Standalone. - Cria um
FormGroupcom três campos:nickname(mínimo 4 letras),idade(obrigatório) epoder. - No HTML, liga os inputs aos nomes que definiste no TypeScript.
- Cria uma mensagem de erro que só aparece se o
nicknametiver menos de 4 letras e já tiver sido tocado (touched). - Desativa o botão de submeter enquanto o formulário for inválido.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 **Reactive Forms** oferecem mais controlo, testabilidade e escalabilidade.
- 📌 O **FormGroup** é o contentor; o **FormControl** é o campo individual.
- 📌 Usamos a classe **Validators** para definir regras (required, email, minLength).
- 📌 A propriedade **.valid** diz-nos se está tudo bem com o formulário ou campo.
- 📌 O estado **.touched** ajuda-nos a não mostrar erros antes do utilizador tentar preencher o campo.
9. Desafios Práticos
Desafio 1: O Botão Teimoso
Porque é que se recomenda desativar o botão de Submit baseando-se no meuForm.valid em vez de validar apenas no clique?
Desafio 2: Valor vs Controlo
Como farias para limpar (ficar vazio) apenas um campo específico do formulário sem mexer nos outros?
Desafio 3: Reatividade Real
É possível ouvir as mudanças de um formulário em tempo real (tipo um Observable) enquanto o utilizador escreve?