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)…
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.
@@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!
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).
@@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!
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
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
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, })}
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...
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(...)
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
Explicação sensacional, Diego!
Ótimo conteúdo, veio bem na hora que eu precisava!
Podia rolar um video daqueles formulários avançados que tem steps
Ótimo, era exatamente o que eu estava precisando, vlw
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
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.
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 ?
entre hook form + zod e formik + yup, qual é o melhor a se usar?
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!
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!
Essas lives passam em qual lugar?
esse vídeo é continuação de qual?
Meu TCC tá com esse combo ai no Next.js
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
ótimas dica!
Caramba, resolveu minha vida kkkk
ótimo vídeo.
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
Vai disponibilizar no github?
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
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, })}
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?
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?
massa demais !!
Qual o theme do vscode?
Min theme
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
E formik?
Particularmente não curto a API do Formik, mas é uma opção também.
@@dieegosf uso com o component
Entendi nada kkkk. Espero que no futuro consiga entender isso com facilidade.
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