Aula 10: Formulários no Angular 📝

Nesta aula, vamos aprender como coletar e validar dados dos usuários usando as duas abordagens do Angular: Template-driven e Reactive Forms.

---

🎭 As Duas Abordagens

Característica	Template-driven	Reactive Forms
Configuração	No HTML (Directivas)	No TypeScript (Código)
Escalabilidade	Indicado para formulários simples	Indicado para formulários complexos
Validação	No HTML	Programática
Previsibilidade	Menor (Assíncrono)	Maior (Síncrono/Imutável)

---

1. Template-driven Forms

Usa o ngModel para criar o modelo de dados automaticamente a partir do HTML.

<form #meuForm="ngForm" (ngSubmit)="enviar(meuForm)">
  <input name="email" ngModel required email>
  <button [disabled]="meuForm.invalid">Enviar</button>
</form>

---

2. Reactive Forms

Você cria e gerencia o estado do formulário explicitamente no TypeScript. Oferece muito mais controle.

No TypeScript (.ts):

import { FormGroup, FormControl, Validators } from '@angular/forms';

meuForm = new FormGroup({
    nome: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email])
});

onSubmit() {
    console.log(this.meuForm.value);
}

No HTML (.html):

<form [formGroup]="meuForm" (ngSubmit)="onSubmit()">
  <input formControlName="nome">
  <input formControlName="email">
  <button type="submit">Cadastrar</button>
</form>

---

✅ Validações e feedback

O Angular permite verificar o estado de cada campo (dirty, touched, valid, invalid).

<div *ngIf="meuForm.get('email')?.invalid && meuForm.get('email')?.touched">
  Email é obrigatório e deve ser válido.
</div>

---

🌟 Ciclo do Formulário

graph LR
    A[Usuário Digita] --> B[Estado do Control Muda]
    B --> C{Válido?}
    C -- Sim --> D[Botão Ativado]
    C -- Não --> E[Exibe Erro]
    D --> F[Submit: Dados para o Servidor]

---

🚀 Prática: Cadastro de Usuário

Vamos construir um formulário de cadastro com: 1. Campos: Nome, Email, Senha e Confirmação de Senha. 2. Validação de obrigatoriedade e máscara de email. 3. Desabilitar o botão de enviar até que tudo esteja correto.

---

🏁 Mini-Projeto da Aula

Crie um formulário de Feedback. O usuário deve avaliar o serviço de 1 a 5 (Dropdown) e escrever um comentário (Textarea). Use Reactive Forms e exiba uma mensagem de sucesso na tela após o "envio" dos dados.