Pular para conteúdo

Aula 10: Formulários 📝

Coletando Dados com Segurança

🎭 Duas Maneiras de Trabalhar

O Angular oferece dois caminhos para criar formulários:

  1. Template-driven: Simples e rápido (HTML).
  2. Reactive Forms: Robusto e escalável (TypeScript).

🏗️ Template-driven Forms

Ideal para formas pequenas e rápidas.

  • Usa ngModel para sincronizar.
  • A maior parte da lógica fica no HTML.

⚡ Reactive Forms

O queridinho do mercado.

  • Você define a estrutura no TS.
  • Oferece controle total e previsibilidade.
  • Muito fácil de testar!

🛠️ Peças dos Reactive Forms

  1. FormControl: Controla um campo individual.
  2. FormGroup: Agrupa vários controles.
  3. FormBuilder: Atalho para simplificar a criação.

✅ Validações

O Angular já vem com validadores prontos:

  • Validators.required
  • Validators.email
  • Validators.minLength(5)

🔍 Estados de um Campo

Como saber se o usuário errou?

  • Pristine: Não foi alterado.
  • Dirty: Já foi alterado.
  • Touched: O usuário já entrou e saiu do campo.
  • Invalid: Não passou na validação.

🎯 Prática

Vamos criar um formulário de Cadastro de Produto com validações em tempo real!

❓ Dúvidas?

Vamos formulá-las! 🚀