Formulários AVANÇADOS no React | React Hook Form, Zod e Typescript

Formulários são essenciais em qualquer aplicação web e existem casos que são mais complexos e que envolvem campos condicionais e validações avançadas.
Nesse vídeo, vamos criar um exemplo de formulário complexo + validações, com React Hook Form, Zod e Typescript.
INFORMAÇÕES IMPORTANTES 👇
Participe da nossa comunidade no Discord:
/ discord
𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟:
7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE
• 7 CONCEITOS DO TYPESCR...
QUAL A MELHOR ESTRUTURA DE PASTAS PARA PROJETOS REACT/NEXT.JS
• QUAL A MELHOR ESTRUTUR...
COMO APLICAR SOLID NO REACT - Inversão de dependência DIP
• COMO APLICAR SOLID NO ...
[ROADMAP] O QUE VOCÊ DEVERIA ESTUDAR EM 2O23? Fique de olho nessas tecnologias
• [ROADMAP] O QUE VOCÊ D...
TUTORIAL NEXT.JS 13: FETCHING DATA - PARTE 3/3
• TUTORIAL NEXT.JS 13: F...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
QUANDO NÃO UTILIZAR ESTADOS NO REACT?
• QUANDO NÃO UTILIZAR ES...
MELHORE A USABILIDADE DE SUAS APLICAÇÕES COM ISSO
• MELHORE A USABILIDADE ...
TUTORIAL NEXT.JS 13: VALE A PENA MIGRAR? PARTE 1/3
• TUTORIAL NEXT.JS 13: V...
A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app!
• A FORMA CORRETA DE CRI...
---
Livros que me ajudaram:
Código Limpo
amzn.to/3hHXVKY
Arquitetura Limpa
amzn.to/3Viqw7v
Como ser um programador melhor
amzn.to/3POQ5fq
Estruturas de dados e algoritmos com JavaScript
amzn.to/3hM0L1u
Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos
amzn.to/3BWsaEO
14 hábitos de desenvolvedores altamente produtivos
amzn.to/3uZqsyy
Hábitos Atômicos
amzn.to/3FGllIM
Aprendendo a Aprender
amzn.to/3WxM0hG
Rápido e devagar
amzn.to/3PLrYhq
A vida dos Estoicos
amzn.to/3vaQIGl
Meditações de Marco Aurélio
amzn.to/3joFYS1
*Links afiliados.
---
👋 Você pode me encontrar aqui:
🧑‍💻 Blog: www.devjuniorp...
💼 LinkedIn: / junior-alves-b66a10127
💻 GitHub: github.com/jju...
📷 Instagram: / devjunioralves
👨‍💻 Sobre mim
Eu sou Junior, Senior Frontend Engineer! Tenho 26 anos e moro em Goiás. Eu compartilho todo tipo de conteúdo relacionado à desenvolvimento de software.
✉️ Email comercial
[e-mail]
📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.
#reactjs #nextjs #typescript

[@devjunioralves]

Livros recomendados: Estruturas de dados e algoritmos com JavaScript amzn.to/3hM0L1u Código Limpo amzn.to/3hHXVKY Como ser um programador melhor amzn.to/3POQ5fq Arquitetura Limpa amzn.to/3Viqw7v Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos amzn.to/3BWsaEO 14 hábitos de desenvolvedores altamente produtivos amzn.to/3uZqsyy Hábitos Atômicos amzn.to/3FGllIM Aprendendo a Aprender amzn.to/3WxM0hG Rápido e devagar amzn.to/3PLrYhq A vida dos Estoicos amzn.to/3vaQIGl Meditações de Marco Aurélio amzn.to/3joFYS1

[@AmsterdanVasconcelos]

Tou maratonando os seus vídeos de formulários. E são muito bons. Também amo a organização das suas playlist.

[@devjunioralves]

Que show man! Fico muito feliz que esteja curtindo os conteúdos 👊

[@LucasSIlva-hc5kb]

fala Alves!! Muito bom seu canal irmão! Depois faz um vídeo criando um formulário dentro de um componente Wizard (passo a passo). Valeeu!!

[@devjunioralves]

Faaala Lucas, blz? Sim, quero trazer mais conteúdo sobre forms e um multi-step seria show!

[@juninfortunato]

Rapaaz esse vídeo vale ouro, estava precisando de um form desse semana passada e não sabia nem como pesquisar sobre. Ai vem esse conteúdo agora, caiu como uma luva. Valeeeu 🔥🔥🔥🔥

[@devjunioralves]

Aí simmm, show man! Que top! 👊🚀

[@leandroluisdaronch5535]

Show de bola seus vídeos, se puder criar uma sequência de vídeos com o desenvolvimento de um projeto completo, seria muito legal!

[@devjunioralves]

To organizando pra fazer isso Leandro, pq ultimamente ta um pouco corrido, mas quero sim fazer isso. Valeu demais pelo feedback!

[@__maiquinho]

Cara, eu amo seus conteúdos. Tu é demais!

[@lucao_loureiro]

Vídeo sensacional brother, parabéns pelo conteúdo!

[@Matheuscantanhede-k6g]

Primeiramente agradecer Slavou minha vida amigo

[@devjunioralves]

Que show man, valeuuu! 👊

[@lucaspaixao8107]

Boa, massa demais essa estratégia. Sugestão: fazer um formulário com steps com essa lib. Like!

[@devjunioralves]

Valeu Lucas! Sim, vou trazer um vídeo com form multistep

[@henriquekramer_]

@@devjunioralves boaaa, seria muito massa um multistep

[@EliabyTeixeira]

excelente 😌

[@bruno-dev]

meu amigo... esse foi top

[@devjunioralves]

Show man, que bom que tu curtiu!

[@Fenderoutside]

Muito massa, tou até pensando em mudar um dialog pra esse formato de form.

[@devjunioralves]

Massa Ednei, valeu man! Fica show também.

[@eniosombra]

Conteúdo top

[@devjunioralves]

Muito obrigado! 👊

[@fellipe6776]

Muito bom, parabéns pelo conteúdo. Fiz um projeto que uso os field arrays. O meu problema é que no form de update os Array fields só são mostrados quando clica no append

[@eriksantos2277]

Como eu faço pra implementar essa validação no react select e mudar message de Required que fica, já apliquei o refine depois do object mas não vai de jeito nenhum, quando eu seleciono a opção a message some, porém gostaria de alterar ela

[@glendsonzeustomazetto4209]

muito bom o video, faltou só falar de contect form

[@devjunioralves]

Valeu Glendson! O que seria contect form?

[@joaopedroo.p4560]

Excelente vídeo! Uma dúvida... Eu poderia colocar o input em um componente e usar o register da maneira que vc ensinou ?

[@devjunioralves]

Valeu man! Sim, poderia tranquilamente.

[@GiovaniFranz]

Cria uma playlist de forms com esse tipo de validação, upload e multistep, não vi nada assim no youtube ainda

[@devjunioralves]

Fala Giovani! Tem uma playlist ja só sobre formulários :D Boa sugestão, posso trazer sim conteúdo sobre isso.

[@rondycouto1983]

Junior, como aplicar mascara em um campo dinamico usando o react hook forms? utilizo o zod para validar, porém quando tento aplicar uma mascara no campo dinamico, não ta rolando... e aproveitando, parabens pelos conteudos....

[@devjunioralves]

Tu pode utilizar o setValue do RHF junto com useEffect, tem um vídeo aqui no canal onde utilizo essa abordagem, só não lembro qual é kkkk Valeu demais man!!! 👊

[@amesqFF]

Amigo, desculpa incomodar, se puder ajudar em uma situação, seguinte: tenho um input que cadastra os 4 ultimos digitos de um cartao, so que quero digitar apenas numeros e limitar a 4 digitos o input. Até consegui fazer, porém, quando o cartao inicia com o numero ZERO (0), o zod não valida. diz o seguinte: "O número do cartão deve conter 4 dígitos" estou Usando NEXT e react hook form e zod.

[@edu_amr]

queria ver como que faz a integração com outras libs, bibliotecas como o react-input-mask ou o react-input-select :/

[@devjunioralves]

Tenta sempre centralizar libs externas, para diminuir ao máximo dependências. Mas posso fazer um vídeo sim Eduardo!

[@edu_amr]

@@devjunioralves Sim eu sempre tento procurar um que contemple tuo, mas é muito dificil encontrar uma que se encaixe em tudo, ex: precisei fazer um select que aceitasse multiplas escolhas, mas toda hora o controller o useForm dava erro ou n verificava e passava reto.

[@devjunioralves]

@@edu_amr tem o react-select, aceita mask e etc. Acho que vale a tentativa, ja usei ele junto com o RHF e foi tranquilo.

[@luigiremor1829]

Eu já fiz um multi select com react-select usando o RHF, deu um trabalho, tive que ir meio longe, mas funcionou 😂 Ver o junior fazendo isso ia ser top até pra ver se eu viajei demais na implementação.

[@devjunioralves]

@@luigiremor1829 haha com o React Select é mais tranquilo, já com o MUI, aí é mais complicado. Mas vou trazer sim conteúdo sobre isso.

[@CarlosEduardo-gi4xf]

Eu precisei desse tutorial semana passada kkkkk

[@devjunioralves]

Kkkkk putz man, mas tu conseguiu resolver a task né?

[@danielmonaro4835]

Pessoal estou com um problema ali no input de number, apesar do valueAsNumber funcionar, quando o input fica vazio, o erro retornado é Expected number, received nan, alguem saberia uma maneira de tratar este erro?

[@danielmonaro4835]

Acabei de descobrir kkkk, pode ser passado um parametro "message" dentro do schema em z.number(). Exemplo: .number({ message: 'erro tratado' })

[@henriquembotelho]

Esse valueAsNumber está me dando um trabalho aqui no meu serviço. O input que usamos é customizado com base no material ui e ele não tem essa propriedade. E também tenho que usar o controler no lugar do ...register

[@devjunioralves]

Putz Henrique. Mas quando utilizamos uma lib de componentes como o MUI é melhor utilizar o Controller do RHF mesmo, a propria doc recomenda isso.