Formulário dinâmico com React Hook Form e Zod

Workshop

23 vídeos • 01:47:22

Seção 01 | Introdução

  1. 1.

    Apresentando o projeto

    01:26
  2. 2.

    Por que React Hook Form e Zod?

    01:33
  3. 3.

    Requisitos do Projeto

    09:14
  4. 4.

    Setup do Projeto

    03:59

Seção 02 | Deixando o form dinâmico

  1. 5.

    Botão de revelar senha

    05:25
  2. 6.

    Máscaras de Input CEP, CPF e Telefone

    04:07
  3. 7.

    Buscando Endereço e Cidade com o CEP

    07:46
  4. 8.

    React Puro: dificuldades em implementar formulários

    03:27

Seção 03 | React Hook Form

  1. 9.

    React Hook Form Instalação

    03:08
  2. 10.

    Usando o React Hook Form no form

    03:59
  3. 11.

    Loading e submetendo dados com RHF

    05:20
  4. 12.

    Validação e exibição de erros individuais

    15:03
  5. 13.

    Componente de erro do React Hook Form

    02:47
  6. 14.

    Controlando inputs com o React Hook Form setValue

    04:40
  7. 15.

    Validação customizada: senha e confirmação de senha

    04:47
  8. 16.

    Corrigindo erros

    01:35
  9. 17.

    Implementando validação da API (backend)

    07:10

Seção 04 | Zod

  1. 18.

    Zod no React Hook Form usando resolvers

    03:21
  2. 19.

    Criando o Schema no Zod

    06:01
  3. 20.

    Validações do Zod no formulário

    08:24

Seção 05 | Últimos Ajustes

  1. 21.

    React Hot Toast para um melhor feedback

    01:56
  2. 22.

    Limpando o formulário após submissão

    00:56

Seção 06 | finalização

  1. 23.

    Encerramento

    01:18
Login
Workshops>Formulário dinâmico com React Hook Form e Zod>Corrigindo erros

Corrigindo erros

Ajustamos o código removendo conflitos entre o uso de useState do React e o estado do React Hook Form. Utilizando getValues do React Hook Form, corrigimos o preenchimento de endereços sem erros e testamos a funcionalidade.

Comentários

(0)