Formulários AVANÇADOS no React | React Hook Form, Zod e Typescript
HTML-код
- Опубликовано: 7 фев 2025
- 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
devjuniorplus@gmail.com
📌 Utilidades
Editor: VS Code
Tema: Illusion
Music provided by NoCopyrightSounds.
#reactjs #nextjs #typescript
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
Tou maratonando os seus vídeos de formulários. E são muito bons. Também amo a organização das suas playlist.
Que show man! Fico muito feliz que esteja curtindo os conteúdos 👊
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!!
Faaala Lucas, blz?
Sim, quero trazer mais conteúdo sobre forms e um multi-step seria show!
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!
To organizando pra fazer isso Leandro, pq ultimamente ta um pouco corrido, mas quero sim fazer isso.
Valeu demais pelo feedback!
Cara, eu amo seus conteúdos. Tu é demais!
Primeiramente agradecer
Slavou minha vida amigo
Que show man, valeuuu! 👊
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 🔥🔥🔥🔥
Aí simmm, show man! Que top! 👊🚀
Vídeo sensacional brother, parabéns pelo conteúdo!
Muito massa, tou até pensando em mudar um dialog pra esse formato de form.
Massa Ednei, valeu man! Fica show também.
Boa, massa demais essa estratégia.
Sugestão: fazer um formulário com steps com essa lib.
Like!
Valeu Lucas!
Sim, vou trazer um vídeo com form multistep
@@devjunioralves boaaa, seria muito massa um multistep
meu amigo... esse foi top
Show man, que bom que tu curtiu!
muito bom o video, faltou só falar de contect form
Valeu Glendson!
O que seria contect form?
excelente 😌
Conteúdo top
Muito obrigado! 👊
Cria uma playlist de forms com esse tipo de validação, upload e multistep, não vi nada assim no youtube ainda
Fala Giovani! Tem uma playlist ja só sobre formulários :D
Boa sugestão, posso trazer sim conteúdo sobre isso.
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
Excelente vídeo! Uma dúvida... Eu poderia colocar o input em um componente e usar o register da maneira que vc ensinou ?
Valeu man!
Sim, poderia tranquilamente.
Eu precisei desse tutorial semana passada kkkkk
Kkkkk putz man, mas tu conseguiu resolver a task né?
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
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....
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!!! 👊
queria ver como que faz a integração com outras libs, bibliotecas como o react-input-mask ou o react-input-select :/
Tenta sempre centralizar libs externas, para diminuir ao máximo dependências.
Mas posso fazer um vídeo sim Eduardo!
@@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.
@@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.
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.
@@luigiremor1829 haha com o React Select é mais tranquilo, já com o MUI, aí é mais complicado. Mas vou trazer sim conteúdo sobre isso.
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.
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
Putz Henrique. Mas quando utilizamos uma lib de componentes como o MUI é melhor utilizar o Controller do RHF mesmo, a propria doc recomenda isso.
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?
Acabei de descobrir kkkk, pode ser passado um parametro "message" dentro do schema em z.number(). Exemplo: .number({ message: 'erro tratado' })