A melhor forma de criar formulários no React (hook form + zod)
Вставка
- Опубліковано 20 січ 2024
- Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com.br/
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
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
Ótimo conteúdo, veio bem na hora que eu precisava!
Zod e React Hook Form: a união perfeita para trabalhar com formulários. Show
Explicação sensacional, Diego!
Show diegão!
Tenta trazer aquele conteudo de UI Clone, era muito massA!
ótimas dica!
Bicho, top conteúdos gratuitos, eu to doido para comprar o curso, se o gratuito está nesse nível imagina o pago
massa demais !!
ótimo vídeo.
Usamos muito hook form e ZOD ajuda muito. Acho que perguntei antes mas vc acha que Bun esta pronto para prod ?
Podia rolar um video daqueles formulários avançados que tem steps
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
Caramba, resolveu minha vida kkkk
entre hook form + zod e formik + yup, qual é o melhor a se usar?
qual a lib de componentes de ui que ele ta usando ai ?
Essas lives passam em qual lugar?
Vai disponibilizar no github?
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.
Meu TCC tá com esse combo ai no Next.js
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?
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
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
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...
Qual o theme do vscode?
Min theme
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?
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 UA-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!
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
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, })}
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
Prefiro Formik + Yup