🚀 Capítulo 10: Formulários Orientados a Template

🎯 Objetivo da Aula

Ao final desta aula, você será capaz de criar formulários de entrada de dados no Angular usando a abordagem Template-Driven, capturar os dados preenchidos pelo usuário e realizar validações básicas.

---

🏢 O Cenário Prático (Seu Desafio)

A Aliança Rebelde precisa cadastrar novos pilotos para a frota. Seu desafio hoje é criar o formulário de Alistamento de Pilotos, onde o usuário digitará o nome e a patente do recruta, garantindo que nenhum campo fique vazio!

---

🧠 Fundamentos: A Teoria Traduzida

O Angular oferece duas formas de trabalhar com formulários. A primeira é a Template-Driven (Orientada a Template), onde a maior parte da lógica fica direto no arquivo HTML.

Conceitos Chave:

• ngForm: É a diretiva que transforma uma tag <form> comum em um formulário inteligente do Angular.
• ngModel: Como vimos, ele sincroniza o valor do input com o código. Em formulários, ele também serve para registrar o campo dentro do formulário.
• #meuForm="ngForm": Cria uma variável de referência no HTML para podermos checar se o formulário está válido ou não.

---

📖 Exemplo Guiado: Formulário de Alistamento

Vamos criar o formulário no nosso componente.

🛠️ Passo a Passo (HTML)

Abra src/app/painel-controle/painel-controle.component.html e adicione:

<div class="painel">
  <h3>📝 Alistamento de Pilotos</h3>
  
  <!-- Criamos a referência #f e dizemos para executar cadastrar() ao enviar -->
  <form #f="ngForm" (ngSubmit)="cadastrar(f)">
    
    <div>
      <label>Nome do Recruta:</label>
      <input type="text" name="nome" ngModel required #nome="ngModel">
      <!-- Mostra erro se o campo foi tocado e está inválido -->
      <span *ngIf="nome.invalid && nome.touched" style="color: red;">
        O nome é obrigatório!
      </span>
    </div>
 
    <div>
      <label>Patente:</label>
      <input type="text" name="patente" ngModel required>
    </div>
 
    <button type="submit" [disabled]="f.invalid">Cadastrar</button>
  </form>
</div>

🛠️ Passo a Passo (TypeScript)

Abra src/app/painel-controle/painel-controle.component.ts e adicione a função:

  cadastrar(form: any) {
    if (form.valid) {
      console.log('Dados do Recruta:', form.value);
      alert('Recruta cadastrado com sucesso!');
      form.reset(); // Limpa o formulário
    }
  }

🕹️ Como Executar e Testar no VS Code

1. Salve tudo e veja o navegador.
2. Tente clicar no botão “Cadastrar” sem preencher nada. Ele estará desabilitado!
3. Digite algo no campo Nome, apague e clique fora. A mensagem vermelha “O nome é obrigatório!” aparecerá.
4. Preencha os dois campos e clique em Cadastrar. O alerta aparecerá e os dados serão impressos no console do navegador!

---

🛠️ Prática Obrigatória 1

Adicione um terceiro campo no formulário chamado “Idade” (name="idade"). Torne-o obrigatório e do tipo número.

---

🛠️ Prática Obrigatória 2

Use a interpolação para exibir na tela o estado do formulário (f.valid). O resultado deve ser true ou false na tela enquanto você digita.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No .html (dentro do form):

<div>
  <label>Idade:</label>
  <input type="number" name="idade" ngModel required>
</div>

Prática 2:

No .html (fora do form):

<p>O formulário está válido? {{ f.valid }}</p>

---

← Capitulo Anterior | Proximo Capitulo →