Formulários avançados no React (Hook Form + Zod)
HTML-код
- Опубликовано: 21 янв 2025
- FALTAM POUCOS DIAS para a oportunidade CONFIDENCIAL ser revelada: rseat.in/ENt90...
→ ESPECIALIZE-SE EM REACT COM O IGNITE: rseat.in/ignite-
→ TESTE SEUS CONHECIMENTOS EM REACT: rseat.in/ignite-
O que você precisa para aprender a construir um formulário avançado com React?
Nessa aula ao vivo, vamos desenvolver um projeto de formulário contendo features como upload de imagens, array de campos dinâmicos, validação e transformação de dados.
Tudo isso e muito mais utilizando React Hook Form e Zod.
E aí, bora codar?
FALTAM POUCOS DIAS para a oportunidade CONFIDENCIAL ser revelada: rseat.in/ENt90Atzj
Pram quem quiser navegar pelo conteúdo!
- 00:00 Oi pra galera
- 8:12 Inicia conteúdo
- 10:55 Estilização
- 14:10 - 15:23 Problema do audio
- 15:45 React Hook Form: criação de um formulário básico
- 20:20 Lista de to-dos do vídeo
- 21:09 Validação de dados
- 29:55 Dúvida sobre register vs controller
- 30:45 Transformação de dados
- 34:40 Validações customizadas (.refine)
- 37:25 Field Arrays
- 48:30 Convertendo input de String para Number
- 51:54 Dúvida: Type do Handle Submit
- 52:35-54:30 Mais dúvidas
- 54:30 Upload de Arquivos
- 1:03:30 Composition Pattern
- 1:07:15 Conclusão
Esse cara é um monstro namoral mesmo 🤩
Sempre que vejo as aulas dele, fico pensando se algum dia eu vou ter a facilidade de programar semelhante ao que esse cara tem, namoral mesmo!!
Meus parabéns mano, tu é uma inspiração!
Hook form é incrível, utilizo ele junto com yup ao invés de zod mas tbm funciona extremamente bem, principalmente para formularios dinâmicos e campos dinâmicos com validação
Diego, EU TE AMO, essa live foi um presente pra mim, estou desenvolvendo um projeto no meu trabalho em que estamos utilizando exatamente o Hook form, essa live resolveu um monte de problemas ❤
Diego é monstro demais. To trampando em um freela e precisava exatamente dessa live kkk
Diego tem o dom de ensinar! Sempre me admiro com isso.
Que aula top! Uso o Formik integrado ao Yup para os meus formulários, mas, ao migrar para o Typescript, comecei a sentir falta de uma boa integração com TS. A combinação Hook Form + Zod fica excelente. Código fica delícia!
Vídeo perfeito, me ajudou demais, estou estudando react agora, quando começar nesse conceito de formulários, já vou estar com uma boa base 😜
Conteúdo absurdo. Qualidade impecável.
Cara, Diego. Obrigado cara, como aprendi com essa aula! Vc é foda!
Diegão, você falou sobre usar o superRefiine para comparar dois inputs de senha por exemplo. Não consegui fazer dessa forma, mas consegui de outra. Basta usar o refine como método após o object, passando um outro objeto com as props message e path. Na prop path passa-se um array contendo qual campo desejo atribuir aquele erro. Fica mais ou menos assim:
.refine((data) => data.password === data.confirmPassword, {
message: 'As senhas precisam ser iguais',
path: ['confirmPassword']
});
Simplesmente animal, muito obrigado pelo conteúdo. 🤩🤩
Aula top demais! Sensacional. Esclareceu muito!
53:19 🤣🤣🤣🤣
Parabéns pelo seu trabalho!!! Muito bom!!!
Muito bom esse video! Ja usei o react hook form bastante antes, mas com as regras de validação dele mesmo. E com o video aprendi duas coisas: 1) essa forma de usar um esquema pq separa a renderização das regras de validação; e 2) essa extensao console ninja achei muito útil (tomara que funcione pra outras lingaugens também, ainda viu testar 😅)
slk mano o Diego é outro nível, ele coda rápido pakas e faz parecer brincadeira de crianca
Caraca man, muito bem explicado.. Obrigado
Top demaisss Diegão!
que hook incrivel, muito top
Excelente vídeo Diego, obrigado!
9:50 => Instalação das Libs
boa explicação e, muito bom mesmo!
Field array simplesmente salva vidas já fiz tanta gambiarra pra fzr a mesma coisa
diego é brabo demais
que aulão!! perfeito
14:32, i agora ? ala ele kkkk
kkkkkkkkkkkkkkkkkk bem isso ai kkk
Excelente 🎉
uma coisa que eu tenho tido dificuldade de visualizar a forma correta de fazer é no caso de utilizar a inferencia de tipo do zod com formularios complexos, onde eu tenho este formulario dividido em varias "partials". Como manipular os valores e as validações entre as partes mantendo a tipagem correta do meu objeto e etc
Pessoal, estou desenvolvendo um projeto, onde eu tenho um multi form steps, eu tenho uma duvida em relação a como fazer, pois vi vários vídeos no youtube e praticamente a maioria usa um contador de passos e quando passa, o vai e renderiza outros inputs tudo isso na mesmo arquivo, só que eu tenho duvida se isso é o indicado mesmo, ou se você cria um context e provider do React junto com Hook Form e separa os steps em vários arquivos acessando assim pelo contexto os valores
O React hook form já tem um provider, ai vc chama o provider, passa o retorno do useForm pra esse provider e dentro do escopo (nas childs) vc chama o useFormContext.
Também tenho essa questão de multi form step, a dica que eu te dou é: cada step, faz um provider diferente, pq vc so vaii conseguir refinar o objeto pra fazer validação tipo confirmação de senha ao tentar dar submit uma vez pelomenos.
Eu criei um componente pra deixar todo o meu formulário ja pronto, facilitando meu desenv.
Formulario que eu criei: (esse formProvider é do proprio ReactHookForm)
export function CustomForm({ onSubmit, zodSchema, children, userFormProps }: Props) {
const { methods } = useCustomForm({ onSubmit, userFormProps, zodSchema }); // aqui que eu chamo o useForm, ele me retorna esse method que eu to usando nesse codigo
return (
//passo todos os methods aqui pro form provider
onSubmit(data))}
>
{children}
);
}
Exemplo de como eu tenho usado esse CustomForm:
export function SignUpUser({ onSubmit }: Props) {
const { currentStep, onFinishStep } = useSignUpUser({ onSubmit });
return (
onFinishStep({ address: data })}
zodSchema={signUpUserAddressFormSchema}
>
);
}
Posso ter feito algumas coisas erradas, provavelmente, mas como zod e react hook form é meio mato pra mim, a gente vai aprendendo com o desenvolvimento da coisa rs.
Quando não validou a primeira vez deveria marcar o input com outline vermelho? O meu ficou branco.
Video muito útil
onde acontece essas lives do ignite?
que vídeo sensacional diego, ajudou demais
uma dúvida q eu tive aqui, como faço essa uma validação onde preciso de um valor dinâmico no "refine" dele? por exemplo, o valor não pode ser maior que X, ou a data precisa ser antes de X, sendo X um valor dinâmico que vem da api?
Nesse caso a gente não faria a validação dentro do schema, faria ela de forma mais manual dentro do método de submit ali do componente mesmo.
@@dieegosf Criar uma função que retorna um schema e passar os valores dinamicos como argumento, tipo isso?
Poderia, assim que recuperar o valor X, inserir ele no formulário utilizando setValue, e no momento da validação do valor que advem do formulário, realizar a verificação que necessita e então lançar o erro. O setValue inclui valores no teu formulário sem necessidade de ter um input, você pode incluir até mesmo arrays de objetos para caso necessite de validações que dependem de dados externos ao formulário
7:30 Maaaaanno ele acertou o país que o cara ta kkkkk
E o mago do timezone
Hahahahaha, viagei uma vez pra europa com timezone +5 então joguei um pouquinho pra esquerda... geralmente tem muito Brasileiro trabalhando em Portugal.
Como eu faria para que o react-hook-form não ficasse monitorando o valor digitado no input mostrando assim imediatamente o erro? E sim, somente quando eu clicasse no botão de salvar.
Você precisa usar essa opção (react-hook-form.com/api/useform/#reValidateMode). Hoje as opções é enquanto digita (onChange), quando sai do input (onBlur) ou apenas no submit (onSubmit)
@@dieegosf Show! Valew Diegão.
Alguém indica algum material para estudar composition pattern? Tem no ignite (sou aluno, mas não lembro de ter visto)?
Não tem no ignite, mas vc pode buscar em outros canais, realmente ficou devendo essa parte nesse vídeo, seria muito bom se tivesse. Vê no canal desse cara, tem algumas coisas, já via te dar uma boa ideia, mas se quiser ficar seniorzão, vai ter q procurar mais
www.youtube.com/@devjunioralves
@@lucascoliveira3957 obrigado
como fazer validação com campos "select" dinâmicos?
Ja tem esse repositorio em algum lugar??
tem o respositório desta aula?
Fala Diego, e o unform? Não faz mais sentido usar ele? O desenvolvimento da lib foi abandonada?
Qual a principal diferença entre usar o Yup e passar a usar Zod?
Eu senti no Zod uma integração com TypeScript mais eficiente que o Yup.
Opaaaa diego, o que aconteceu com o unform????
q tema é esse no vscode
Alguem teve um erro dizendo FileList is not defined? eu tava fazendo esse projeto com Next, n sei se tem relação.
Conseguiu resolver?
@@LoopezXDev Eu troquei a forma de iniciação, usei z.any() do zod.
@@darkgynn , também tive esse problema, usa dessa forma:
photo: z .custom((v) => v instanceof FileList).refine(/*logica do refine*/)
@@LoopezXDev respondi ai acima.
Genial
Formulário avançado mas cria tudo dentro do app? Porque não fez em componentes.
Top
DIEGUEIRA que extensão é essa de ver os console.log dentro do código?
Console ninja
19:28 kk
😂
Entendi como funciona o Zod, mas ela acontece pelo Frontend, se algum usuário acessar a rota da API do Nextjs e tentar cadastrar algo sem passar pelas validações
Para isso, a API também tem que ter seu zod :)
@@youtuberteam ah, eu não sabia q funcionava no Node tmb. Eu costumava usar o Express-validator, mas daí o front precisava bater na API pra validar o dados. Coisa q n faria sentido. Se o Front bater na API já é de se esperar que os dado estejam corretos. Interessante essa abordagem. No caso do Zod e Next.JS eu dou CTRL+C do componente do FRONT e dou CTRL+V pra API do Next?
@@FelipeFardoProspera Boa parte é Ctrl c e Ctrl v, mas provavelmente deve ter um outro detalhe pra mudar.
@@youtuberteam Entendi. Agr está ficando mais claro como o ecossistema do NextJS funciona. Será que é interessante colocar os schemmas do Zod num arquivo que pode ser exportado e reaproveitado no front e no back do NextJS? Muito obrigado pelas contribuições desde já
@@FelipeFardoProspera
é feita as validações no front e no back.
valida no front, para "garantir" que dados corretos sejam enviados, para não ficar fazendo requisições atoa e pesando no sistema.
valida no back, aí sim para garantir realmente que os dados são seguros para entrar no back-end.
ent é validado no front, apenas pra não ficar fazendo muitas requisições atoa. mas se valida no back-end para ter certeza que nada foi alterado de maneira imprópria atráves de console e etc.
quando um usuário normal tentar criar uma conta ou algo do tipo, se ele escrever algo que não esteja de acordo com o schema, ele já vai ser barrado ali no front mesmo.
até aí tudo bem.
mas se algum usuario mal intencionado tentar fazer alterações pelo console application e burlar a validação do front end, tentando injetar um script malicioso por exemplo, vai ser barrado antes de entrar no back-end, pela validação que é feita lá tmb.
tem uma certa frase, não lembro de quem. Mas se resume a: "Tudo que vem do front é lixo". E é bem por aí, você não deve confiar em nada que vem de la.
35:15 🤣🤣🤣
Slk fiquei surdo sksks
Alguém manda uma dica rápida de como eu valido tudo certinho usando um customInput? como eu passo esse register pra esse input, sem ter que importar essa lib dentro do component de customInput?
Vc consegue herdar as props do input no seu customInput e usar o register normalmente
@@marcelo-maga mas o register não é do input
Penso que o ideal seria usar useFormContext
Tenho um sistema com o back em node/express (atualmente) mais que vou mudar para nestjs e o front end nextjs. Eu e outros devs decidimos usar o zod para validação dos campos do form. Porém, estou na dúvida se faço a validação no Back e envio o resposta para o front end (next) e mostro os erros, ou, se devo fazer só no front. Ou se devo fazer nos dois?
É um sistema de agendamento.
pensado em termos de produção não é o ideal fazer a validação no back depois enviar de volta para o front diria eu, estarias a fazer mais api requests,
Como eu faria para mudar de página caso o login do usuário fosse bem-sucedido?
com o router mesmo, acredito
nonempty do zod não está depreciado?
Acredito que sim, na hora eu sinceramente nem sei porquê coloquei o nonempty sendo que cada propriedade já é definida como obrigatória automaticamente haha
Pow queria ver isso em React-native
estava indo tudo tranquilo, até a parte do tailwind
As Estilizações não estão funcionando 🥲
A API do zod é tão parecida com a da yup que eu não sei quem é fork de quem kkk
Apareceu um erro pra quem usa NextJS: ReferenceError: FileList is not defined
Isso acontece porque o Next antes de exibir o HTML no browser, renderiza os componentes React pelo lado do servidor (onde coisas como File e FileList não existem).
Você pode corrigir isso por meio do seguinte:
const schema = z.object({
file: z.custom(file => file instanceof File)
})
@@danilovieira4442 Interessante! Muito obrigado!