Aprenda a criar um form dinâmico e com validações no React usando React Hook Form e Zod
Nesse projeto vamos aprender a fazer:
Validação e erros diretamente no cliente
Validação e erros provenientes do servidor
Botão para esconder/revelar senha
Preenchimento automático de endereço e cidade de acordo com o CEP
Máscara para telefone celular, CPF e CEP
Tudo isso usando React, React Hook Forms e Zod.
Link para Mini Projeto: https://codante.io/mini-projetos/form...
Capítulos
00:00:00 Apresentando o projeto
00:01:26 Por que React Hook Form e Zod?
00:03:01 Requisitos do Projeto
00:12:14 Setup do Projeto
00:16:15 Botão de revelar senha
00:21:40 Máscaras de Input CEP, CPF e Telefone
00:25:47 Buscando Endereço e Cidade com o CEP
00:33:34 React Puro: dificuldades em implementar formulários
00:37:02 React Hook Form Instalação
00:40:10 Usando o React Hook Form no form
00:44:10 Loading e submetendo dados com RHF
00:49:31 Validação e exibição de erros individuais
01:04:35 Componente de erro do React Hook Form
01:07:24 Controlando inputs com o React Hook Form setValue
01:12:03 Validação customizada: senha e confirmação de senha
01:16:50 Corrigindo erros
01:18:26 Implementando validação da API (backend)
01:25:36 Zod no React Hook Form usando resolvers
01:28:58 Criando o Schema no Zod
01:34:59 Validações do Zod no formulário
01:43:24 React Hot Toast para um melhor feedback
01:45:20 Limpando o formulário após submissão
01:46:16 Encerramento
Смотрите видео Aprenda a criar um form dinâmico e com validações no React usando React Hook Form e Zod онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Codante - Evolua no front-end 22 Июль 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,177 раз и оно понравилось 96 людям.