A melhor forma de criar formulários no React (hook form + zod)
ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 2024
- Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com...
Cadastre-se na nossa plataforma: app.rocketseat...
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat
Zod e React Hook Form: a união perfeita para trabalhar com formulários. Show
Show diegão!
Tenta trazer aquele conteudo de UI Clone, era muito massA!
Bicho, top conteúdos gratuitos, eu to doido para comprar o curso, se o gratuito está nesse nível imagina o pago
Ótimo conteúdo, veio bem na hora que eu precisava!
Explicação sensacional, Diego!
Ótimo, era exatamente o que eu estava precisando, vlw
Podia rolar um video daqueles formulários avançados que tem steps
Galera, quando voces utilizam o contexto pra salvar o estado de cada campo juntamente com o recat hook form voces fazem a sincronização desses valores, certo? pois aqui so funcionou desta forma. Pelo que testei funcionou sem o "name" e funcionou bem com o contexto ja que tenho um componente filho que nao ta no mesmo arquivo.
Show, nessa validação do nome do produto seria legal adicionar um número mínimo de carácteres para não permitir salvar um produto com nome vazio. Tipo .string().min(3)…
Só tem q tomar cuidado com asiáticos, que tem nomes como yu
esse vídeo é continuação de qual?
Diego, e se precisar validar as entradas enquanto digita? Como vc faz?
Ex.: campo de CPF, informar ao usuário que o formato é inválido enquanto ele digita.
Obs.: em muitos casos a experiência do usuário é melhor quando avisamos ele como deve ser feito para enviar o form uma vez só, não deixar ele preencher tudo e só validar no submit (provavelmente terá retrabalho se algum campo estiver inválido e ele não sabia enquanto preenchia).
Basta você passar o "mode" como "onChange" no "useForm" (react-hook-form.com/docs/useform#mode)
@@dieegosf Caraca, que honra. O cara me respondeu hehehe. Mas consigo aplicar essa validação "em tempo real" para apenas um dos campos do form ou vai valer para todos sempre?
@@dieegosf E aproveitando que tu respondeu, quero agradecer por todo o aprendizado até hoje.
Comecei desde o Skylab. A até então Semana Omnistack, com o projeto Dev Radar (se não me engano), serviu de base para o meu TCC na época e daí em diante evolui muito.
Só agradecer e parabenizar por toda a equipe. O trabalho de vocês é fod@! Espero que continuem com essa essência e vontade de ajudar a galera. Vocês merecem muito sucesso.
Se hoje posso dizer que mudei minha realidade através da qualificação e do conhecimento, vocês tem grande parcela nessa trajetória. Valeu de verdade.
@@marcos.padilhaNesse caso você precisa usar o "onChange" presente no "register" do campo específico e nessa função repassada ao "onChange" você chama o método "trigger" que é devolvido pelo "useForm". O trigger é uma maneira de disparar a validação manualmente em um campo.
@@dieegosf Valeu Diegão! Não sei se o meu TH-cam bugou ou o que, mas meu comentário sumiu kkk
Basicamente agradeci pelo repasse de conhecimento pra galera e pela participação na minha trajetória como Dev.
Graças à vocês e outros professores da internet, consegui mudar a minha realidade. Sigam nessa pegada. Desejo todo o sucesso pra vocês!
qual a lib de componentes de ui que ele ta usando ai ?
Usamos muito hook form e ZOD ajuda muito. Acho que perguntei antes mas vc acha que Bun esta pronto para prod ?
Galera... alguém sabe como é aquele SNIPPET ali que o Diego faz em um novo arquivo que cria ao mesmo tempo a função e já as props da função?
Se você já tem os snippets do react, acho que só de digitar “rfc” ou “rfce” e dar enter, vai criar. Acho que é isso.. não me lembro de instalar outra coisa e não estou pelo pc agora
ótimas dica!
Caramba, resolveu minha vida kkkk
ótimo vídeo.
entre hook form + zod e formik + yup, qual é o melhor a se usar?
Essas lives passam em qual lugar?
Tem uma live inteira ou então um vídeo do diego fazendo esse app inteiro?
Tem, na Twitch :) (usuário dieegosf)
@@dieegosf o vod todo tá disponível Diegão?
Faço dessa forma, só que com o yup. Pretendo começar a fazer projetos com zod em breve.
quase a mesma coisa shahfsuhfds, mas o zod tem uma integração melhor com typescript. Se for usando js, acredito que o yup é melhor.
Mesma bosta
Meu TCC tá com esse combo ai no Next.js
Sinceramente não entendi a função do Zod, parece adicionar uma camada que poderia ser resolvido apenas com TS e `useForm`....o q o zod faz exatamente nesse caso, pois a validação não deveria ser feita com o próprio useForm? e utilizar o error caso precise mostrar mensagens como a documentção do react-hook-form sugere....
Em relação a validação, o useForm já traz essa ferrameta no register: {register("test", {required: true, })}
massa demais !!
Vai disponibilizar no github?
Fala Diego, e aquela lib de vcs, a "Unform", foi descontinuada?
Sim, o React Hook Form é a solução perfeita pra forms, não tem porque eu ficar "concorrendo" com uma lib perfeita.
@@dieegosf Show diego, sempre usei o RHF, mas gostei muito da abordagem do unform, e usei ele num projetinho pequeno no ano passado, mas vi que não tinha atualizações. Valeu pela resposta!
União perfeita até precisar usar dropdown e outros recursos mais avançados de formulário, aí o perfeito já não é mais tão perfeito
Então, é que daí quando é um custom element não existe NENHUMA opção no mercado que vai simplesmente ser um "register". No React Hook Form você pode usar o pra transformar aquele elemento em um controlled component: react-hook-form.com/docs/usecontroller/controller
@@dieegosf estou desenvolvendo um banco digital pra um cliente, tive que usar o Controller, ainda bem que tem essa funcionalidade. Mas confesso que conforme a complexidade vai aumentando, a dor de cabeça também, principalmente com esses Schemas do Zod. Mas enfim, é uma tecnologia boa sim, usei várias vezes esse combo já
Eu uso hook forms a um bom tempo, pessoalmente eu prefiro fazer um wrapper de todos os meus componentes e utilizar o useController no lugar do Controller, fica muito mais limpo, passo somente a prop control retornada pelo userForm e a name, o useController retorna igual o render do Controller, field e fieldState, alem de ficar mais clean, fica muito mais facil criar componentes customizados
Eu uso o RHF com YUP, é muito parecido.
Sim, Yup, Joi, Typebox, Valibot, Zod, são ferramentas semelhantes :)
eu usava o Zod, mas to preferindo o Yup por conta de algumas validações a mais que precisei fazer em um projeto que já utiliava o yup, aí curti mais...
Alguem sabe onde acompanhar as lives ao vivo? Nao achei os vods no canal da rocketseat nem no cana do diego
Ele faz live as vezes no Twitch
qual canal?
E formik?
Particularmente não curto a API do Formik, mas é uma opção também.
@@dieegosf uso com o component
Faltou mostrar como exibir a mensagem de errro para cada input
Boa! De qualquer forma, pra quem chegou nesse comentário, você pode obter os erros de dentro do "useForm" da seguinte forma:
const { ..., formState: { errors } } = useForm(...)
@@dieegosf obrigado, mestre
Qual o theme do vscode?
Min theme
alguém sabe aonde ele f
e morreu no meio do comentário, mas acredito que a sequência era "aonde ele faz live", então: twitch (usuário dieegosf)
@@dieegosf oxi, meu comentário morreu KKKKKKKK. vlww Diegão
Prefiro Formik + Yup