📊 Capítulo 13: Reactive Forms & Typed Forms

Especialização em Frontend com Angular

🗺️ O Fluxo de Validação Fortemente Tipada dos Formulários

flowchart TD
    FORM["FormGroup Fortemente Tipado (FormBuilder / nonNullable)"]
    --> INPUT["Usuário digita no input -> formControlName='email'"]
    --> SYNC_VAL["Executa Validadores Síncronos (Validators.required, Validators.email)"]
    SYNC_VAL --> ASYNC_VAL["Executa Validador Assíncrono (validadorEmailUnico via API)"]
    ASYNC_VAL --> STATUS{"form.valid?"}
    STATUS -- "NÃO" --> ERRORS["Exibe mensagens em form.get('email')?.errors"]
    STATUS -- "SIM" --> SUBMIT["form.getRawValue() retorna DTO 100% tipado!"]

    style FORM fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style INPUT fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style SYNC_VAL fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style ASYNC_VAL fill:#fff9c4,stroke:#fbc02d,stroke-width:1.5px
    style STATUS fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style ERRORS fill:#ffebee,stroke:#d32f2f,stroke-width:2px
    style SUBMIT fill:#e8f5e9,stroke:#4caf50,stroke-width:2px

🎯 Slide 1: Typed Forms com nonNullable

private fb = inject(FormBuilder).nonNullable;

form = this.fb.group({
  nome: ['', [Validators.required, Validators.minLength(3)]],
  preco: [0, [Validators.required, Validators.min(0.01)]],
});
// Ao chamar form.reset(), os campos voltam para '' e 0, NUNCA para null!

🎯 Slide 2: Validações Assíncronas de API

• Usadas para verificar em tempo real se um CNPJ ou e-mail já existe na base de dados com debounce automático para não sobrecarregar o backend.

🎯 Slide 3: FormArray Dinâmico

• Permite adicionar ou remover linhas de formulário dinamicamente (ex.: itens de uma nota fiscal ou lista de telefones).