Course Forms

Faaala Dev! 🚀

Seja muito bem-vindo ao desafio do módulo de Reactive Forms com Angular.

Neste desafio, você terá a oportunidade de colocar em prática os principais conceitos aprendidos durante o módulo, como FormGroup, FormControl, FormArray, validators e integração com API.

Como todo desafio, algumas partes podem exigir pesquisa adicional, e isso faz parte do processo de aprendizado. Vá com calma, teste bastante e confie no seu progresso. Com certeza você sairá desse desafio com muito mais domínio sobre formulários reativos no Angular 💜

---

📋 Sobre o Desafio

Você irá desenvolver um sistema de cadastro e gerenciamento de cursos.

A aplicação permitirá criar, editar, visualizar e remover cursos utilizando Reactive Forms para controlar o estado dos formulários e garantir validações.

Cada curso poderá possuir vários módulos, e cada módulo poderá conter várias aulas — utilizando FormArray para gerenciar esses campos dinâmicos.

A aplicação deverá se integrar com uma API REST já pronta e disponibilizada para você.

---

⚙️ Funcionalidades

Cadastro de Curso

Crie um formulário reativo para cadastrar um curso com os seguintes campos:

• Nome do curso (obrigatório)
• Descrição (mínimo de 10 caracteres)
• Categoria (ex: Frontend, Backend, Mobile)
• Módulos (ao menos um)

Gerenciamento de Módulos e Aulas

Cada curso possui uma lista dinâmica de módulos e aulas, gerenciada com FormArray:

• O usuário pode adicionar e remover módulos
• Cada módulo possui um nome e uma lista de aulas
• Cada aula possui um nome
• O usuário pode adicionar e remover aulas dentro de cada módulo

Curso
├── Módulo 1
│ ├── Aula 1
│ └── Aula 2
└── Módulo 2
└── Aula 1

Listagem e Visualização

• Listar todos os cursos cadastrados
• Visualizar os detalhes de um curso (módulos e aulas)

Edição e Remoção

• Carregar um curso existente no formulário para edição
• Remover um curso da listagem

Reset do Formulário

Adicione um botão para resetar completamente o formulário, limpando todos os campos e os FormArrays de módulos e aulas.

---

📏 Regras de Negócio

• O nome do curso é obrigatório
• A descrição deve ter no mínimo 10 caracteres
• Um curso deve possuir ao menos um módulo
• Cada módulo deve ter um nome e ao menos uma aula
• Ao remover um módulo, todas as suas aulas também são removidas
• O formulário deve impedir o envio enquanto houver validações inválidas
• Mensagens de erro devem ser exibidas nos campos inválidos

---

🔌 API REST

Uma API REST completa já está pronta para este desafio. Ela utiliza json-server com um servidor customizado que inclui CORS, validação e geração automática de IDs.

Como rodar a API

Pré-requisito: Node.js instalado (v18+)

⚠️ Importante: Utilize o comando npm start (que executa node server.js).

Não use npx json-server db.json diretamente, pois o servidor customizado possui tratamento de CORS, validação de dados e geração de UUIDs.

# Clone o repositório da API

# HTTP
git clone https://github.com/rocketseat-education/angular-challenge-course-forms-server.git
# SSH
git clone git@github.com:rocketseat-education/angular-challenge-course-forms-server.git

# Acesse a pasta da API
cd angular-challenge-course-forms-server

A API estará disponível em http://localhost:3000.

Endpoints

Estrutura do body (POST/PUT)

{
  name: Reactive Forms com Angular,
  description: Aprenda a criar formulários reativos com Angular.,
  category: Frontend,
  modules: [
    {
      name: Fundamentos do Angular,
      lessons: [
        { name: Introdução ao Angular },
        { name: Componentes e Templates }

Os IDs são gerados automaticamente pela API. Não é necessário enviá-los no body.

Respostas de erro

A API retorna erros de validação no formato:

{
  timestamp: 2026-01-01T00:00:00.000Z,
  status: 400,
  message: Erro de validação,
  errors: {
    name: O nome do curso é obrigatório,
    modules: O curso precisa ter ao menos um módulo
  }
}

---

🏗️ Estrutura Sugerida

CourseFormComponent

• Reactive Form com FormGroup, FormControl e FormArray
• Gerenciar adição/remoção de módulos e aulas
• Enviar dados para a API

CourseService

• Comunicação com os endpoints da API
• Buscar, salvar, atualizar e remover cursos

CourseListComponent

• Listar cursos cadastrados
• Navegar para edição ou detalhes de um curso

---

📦 Entrega

Após concluir o desafio:

1. Suba seu projeto para o GitHub
2. Envie a URL do repositório na plataforma

E que tal compartilhar seu aprendizado no LinkedIn contando como foi desenvolver esse desafio? Isso ajuda a consolidar o conhecimento e mostrar suas habilidades para o mercado 🚀

---

Feito com 💜 por Rocketseat

Curso
├── Módulo 1
│ ├── Aula 1
│ └── Aula 2
└── Módulo 2
└── Aula 1

# Clone o repositório da API

# HTTP
git clone https://github.com/rocketseat-education/angular-challenge-course-forms-server.git
# SSH
git clone git@github.com:rocketseat-education/angular-challenge-course-forms-server.git

# Acesse a pasta da API
cd angular-challenge-course-forms-server

{
  name: Reactive Forms com Angular,
  description: Aprenda a criar formulários reativos com Angular.,
  category: Frontend,
  modules: [
    {
      name: Fundamentos do Angular,
      lessons: [
        { name: Introdução ao Angular },
        { name: Componentes e Templates }

{
  timestamp: 2026-01-01T00:00:00.000Z,
  status: 400,
  message: Erro de validação,
  errors: {
    name: O nome do curso é obrigatório,
    modules: O curso precisa ter ao menos um módulo
  }
}