Estou com um problema em um projeto o qual utiliza o Redux, para recuperar os dados salvos ao editar o formulário, o initial values recebe os dados do Redux, porém isto está causando um problema quando eu tenho a entrada de dados ao criar um novo cadastro, por causa da diferença que ocorre no initialValues, qualquer evento de onChange está apagando a entrada que eu tenho nos inputs texts do meu formulário. Tentei usar o enableReinitialize={false}, mas aqui no projeto que eu uso não funciona, porém no codeSandbox funcionou: codesandbox.io/s/formik-example-forked-y86zz?file=/index.js:1294-1320 Qual a maneira correta de se fazer essa recuperação de dados para utilizar o mesmo formulário para editar, criar e visualizar?
Que conteúdo bem explicado. Cada vez que você ensina uma função, eu só digo UAU, ai você vem e abstrai mais ainda! UAUAUAU O RENDER do formik não é mais recomendado, mas a documentação ajuda bastante a mudar. Não sei se já fez, mas um vídeo ensinando a enviar emails usando a estrutura do formik, ajudaria muito quem está iniciando e cliente sempre quer essa funcionalidade.
Vinicius! Tenho que deixar registrado a minha gratidão e satisfação profissional pelo seu vídeo acima! Não sou de escrever muitos comentários no TH-cam... mas, após assistir o seu vídeo, prestando muita atenção no conteúdo e na sua didática... tenho que, com todo o respeito, admitir que seria um enorme prazer trabalhar com um profissional como você e fazer "Pair-Programming"! Eu trabalho para uma empresa alemã, enfrentando apenas com a ajuda de Deus, os muitos desafios para ficar no "Top of the art" com respeito à programação de software. E por causa da sua "serenidade", "empatia" e "humildade" eu gostaria de te agradecer por ter produzido este conteúdo público! Este foi o 1.a vídeo que assisti, mas me cativou para reservar um tempo na minha programação semanal, para assistir aos outros e acompanhar a sua carreira! Um grande abraço e fique com Deus! Cl@udio Silv@
Fala Claudio! Tudo bem? Cara, fiquei muito feliz com seu comentário. Fico muito feliz de saber que gostou do vídeo e da didática. E principalmente que o vídeo ajudou. É uma satisfação enorme produzir o conteúdo aqui no canal e saber que ele está sendo útil. Muitíssimo obrigado por ter reservado esse tempo para deixar seu comentário aqui. Valeu mesmo. Um grande abraço, tudo de bom.
Excelente video Vinicius, obrigado por compartilhar com a gente esse conhecimento! Seria muito legal se fizesse um form mais avançado com outros tipos de inputs. Abraço
Parabéns pelo seu conteúdo. Mesmo depois de 2 anos foi o primeiro vídeo que apareceu listado e além disso, extremamente útil e direto ao ponto. Parabéns
Caramba cara, vc me ajudou muito, estou começando na carreira de frontend agora, ja apliquei no meu emprego, Muito Obrigado!,,,Por favor, continue compartilhando conhecimento,!
Que conteúdo top, muito bem explicado e sem rodeios. Estou começando agora no mundo do react e js, com certeza vou consumir todo o conteúdo do canal, valeu !
Ótimo conteúdo Vinicius, eu encontrei um problema no formik com inputs de arquivo, pesquisei na web e vi q o formik não tem compatibilidade com esse tipo de campo. Como faz pra fazer o upload?
Obrigado pelo ótimo video! Estou tentando fazer um formulário de contato mas preciso ter acesso àquele evento padrão do submit, saberia me informar como posso acessar isso com o formik? Desde já, obrigado!
Fala man. Tem sim, você pode utilizar o resetForm, passando initialValues pra ele. Esses dois valores você recebe do próprio formik através das render props. Grande abraço e muito obrigado pelo feedback.
Pô cara, excelente video. Tenho aprendido muito com seus videos. Mas uma dúvida aqui: Digamos que exista uma validação também do lado do servidor da aplicação web. Por exemplo, suponhamos que em um sistema não possa existir email duplicado, e o servidor informe isto ao cliente, por meio de uma api REST, ou qualquer outra forma. É possível, não só validar o formato do email, do lado cliente (com o formik), mas também pegar a mensagem de validação do lado servidor após a digitação do email? Valeu!
Fala Israel. Valeu demais pelos feedbacks. Quanto a dúvida: É possível fazer esse tipo de validação sim, de três formas. 1 - Passando uma função validate direto no Field. Essa função pode ser assíncrona. Ou seja, ela pode fazer um request para a api para validar o email por exemplo. 2 - Implementando uma função validate e passando para o Formik. Essa função pode combinar o uso do YUP para validar o formato dos dados, e também pode fazer uma requisição para validar os valores dos campos. 3 - Se quiser validar somente no submit, você pode fazer com que a api retorne os campos e seus respectivos erros e aí pode utilizar a função setErrors({ campoA: 'erro', campoB: 'erro' }) para mostrar os erros no formulário. Grande abraço.
Fala Bruno, beleza? Precisa instalar o react-dev-tools no chrome. Vou deixar o link aqui: chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Ótimo vídeo amigo, obrigado por compartilhar seu conhecimento com a gente, mas fiquei com uma duvida, como ficaria para aplicar um input com mascará, exemplo: CPF, CNPJ, Datas... enfim, usando o Formik? não encontrei nada na documentação...algum exemplo?
Fala Maicon, tudo certo? Para aplicar máscaras, é necessário implementar um componente específico. Esse componente receberia as props value e onChange e teria que lidar com o fluxo de aplicar a mascará para a visualização do usuário e limpar os dados antes de enviar para a função onChange. Vou gravar um vídeo sobre esse assunto, ficará mais fácil de entender. Grande abraço.
Fala emerson! Fico feliz que tenha gostado. Lá no onSubmit, você tem acesso as actions. Você pode fazer o seguinte: actions.resetForm({ values: { name: '', email: ''} }); Você também pode extrair esse valor para uma variável initialValues, para utilizar tanto na hora de passar as props, quanto passar no resetForm. Qualquer dúvida, estamos aí. Grande abraço.
Fala João, tudo bem? Não entendi muito bem essa parte de esquematizar os inputs? seria para a validação? ou é para fazer um cast dos valores? Grande abraço.
fala Vinicius, blz cara? entao cara, o que vc acha do Nextjs? poderia fazer um video explicando a diferença, por que usar Next ou create-react-app. abraço
Fala Rafael. Cara, só ouço coisas boas dele. Eu trabalhei com ele já faz bastante tempo, acho que foi 2016 ou 2017. O projeto evoluiu bastante de lá pra cá. É uma excelente ideia. Vou me programar para gravar sobre ele! Valeu pela dica.
Fala Fabricio! Você pode tentar criar um custom fields , que utiliza o react input mask por baixo. Eu ainda vou gravar um vídeo ensinando a criar esses custom fields, mas até lá, tem alguns exemplos na documentação: formik.org/docs/api/useField. Qualquer dúvida, da um toque. Abraços.
Fala Patrik! Valeu demais pelo feedback. Cara, tem alguns servidores gratuitos como netlify e vercel. Vou abordar mais sobre deploy nos vídeos sobre nextjs, que pretendo gravar mais adiante.
Boa noite José. A série ReactjS para iniciantes ensina a criar uma aplicação do Zero. A intenção é ensinar react, mas sem utilizar libs. Esses vídeos do Formik, já considera que a pessoa já sabe trabalhar com o React e só está em busca de aprender o Formik.
Tentei fazer o seguinte schema.js para que a letra fique maiúscula ao digitar o nome, mas não funcionou, alguma dica pessoal? *name: Yup.string().uppercase().max(40).required()*
Fala Alexandre! Uma forma que talvez funcione, seja passar um onChange para o seu input. Nesse onChange, você recebe o valor, converte para uppercase e utiliza o setFieldValue para setar o valor em uppercase para o formulário. Outra forma seria implementar um custom field. Dentro dele, você transformaria o valor para uppercase, antes de chamar o onChange, que passa o valor para o formik. A primeira opção é a mais direta, e a segunda opção é melhor se você precisa reutilizar isso em vários lugares. Abraços.
❤️ Fala pra gente o que achou do vídeo! Qualquer dúvida, comentário ou sugestão, deixem abaixo. ❤️
Estou com um problema em um projeto o qual utiliza o Redux, para recuperar os dados salvos ao editar o formulário, o initial values recebe os dados do Redux, porém isto está causando um problema quando eu tenho a entrada de dados ao criar um novo cadastro, por causa da diferença que ocorre no initialValues, qualquer evento de onChange está apagando a entrada que eu tenho nos inputs texts do meu formulário.
Tentei usar o enableReinitialize={false}, mas aqui no projeto que eu uso não funciona, porém no codeSandbox funcionou: codesandbox.io/s/formik-example-forked-y86zz?file=/index.js:1294-1320
Qual a maneira correta de se fazer essa recuperação de dados para utilizar o mesmo formulário para editar, criar e visualizar?
Cara... Apenas parabéns! Excelente
Parabéns!!
Parabéns pelo excelente conteúdo irmão!
Muito bem esclarecido! Ficou mais simples entender
Valeuuuu Max, fico feliz que tenha ficado simples de entender. Abraços.
Muito bom o vídeo. Para quem está iniciando é ótimo.
cara, sua didática é muito boa! ótima explicação!!!
Valeuuuu Mario. Fico muito feliz com um feedback desses. Que bom que está gostando do conteúdo. Abraços.
Que conteúdo bem explicado. Cada vez que você ensina uma função, eu só digo UAU, ai você vem e abstrai mais ainda! UAUAUAU
O RENDER do formik não é mais recomendado, mas a documentação ajuda bastante a mudar.
Não sei se já fez, mas um vídeo ensinando a enviar emails usando a estrutura do formik, ajudaria muito quem está iniciando e cliente sempre quer essa funcionalidade.
Parabéns por seu vídeo, sua explicação é clara
Valeuuuu Adenilson!
Abraços.
Vídeo bem completo. Quem quiser implementar um form com react, somente este vídeo basta! Mais completo que isso só se tivesse mask tbm... Nota 10
Calmo, objetivo e ótima didática. Parabéns!
Valeuuuu Alexandre! Abraços.
Parabéns! Seu canal vai entrar pra minhas lista de vídeos que tenho que assistir pra evoluir! Parabéns, explica muito bem.!!!
Valeuuuu Felipe! Fico feliz em saber que gostou do conteúdo. Abraços.
Muito bom, parceiro! O melhor dentre os que eu sobre validação, sem enrolação, mas também mantendo um ritmo bem amigável.
Valeuuuuu Leandro.
Muito bom!! Obrigado por compartilhar
Parabéns, ótimo trabalho!
Valeuuu Gabryel!
Vinicius! Tenho que deixar registrado a minha gratidão e satisfação profissional pelo seu vídeo acima!
Não sou de escrever muitos comentários no TH-cam... mas, após assistir o seu vídeo, prestando muita atenção no conteúdo e na sua didática... tenho que, com todo o respeito, admitir que seria um enorme prazer trabalhar com um profissional como você e fazer "Pair-Programming"!
Eu trabalho para uma empresa alemã, enfrentando apenas com a ajuda de Deus, os muitos desafios para ficar no "Top of the art" com respeito à programação de software.
E por causa da sua "serenidade", "empatia" e "humildade" eu gostaria de te agradecer por ter produzido este conteúdo público! Este foi o 1.a vídeo que assisti, mas me cativou para reservar um tempo na minha programação semanal, para assistir aos outros e acompanhar a sua carreira!
Um grande abraço e fique com Deus!
Cl@udio Silv@
Fala Claudio! Tudo bem?
Cara, fiquei muito feliz com seu comentário.
Fico muito feliz de saber que gostou do vídeo e da didática. E principalmente que o vídeo ajudou.
É uma satisfação enorme produzir o conteúdo aqui no canal e saber que ele está sendo útil.
Muitíssimo obrigado por ter reservado esse tempo para deixar seu comentário aqui. Valeu mesmo.
Um grande abraço, tudo de bom.
Excelente video Vinicius, obrigado por compartilhar com a gente esse conhecimento! Seria muito legal se fizesse um form mais avançado com outros tipos de inputs. Abraço
Valeu!
Começando com React Js e Native e tentando entender como fazer formularios com validacões nele, e este VÍDEO é EXCELENTE!!!
Parabéns pelo seu conteúdo. Mesmo depois de 2 anos foi o primeiro vídeo que apareceu listado e além disso, extremamente útil e direto ao ponto. Parabéns
Obrigado Vinicius ,seus vídeos são ótimos! está me ajudando muito!
Valeuuuuu Henrique! Abraços.
Muito didático.. parabéns...
Valeuuu Emerson!
Caramba cara, vc me ajudou muito, estou começando na carreira de frontend agora, ja apliquei no meu emprego, Muito Obrigado!,,,Por favor, continue compartilhando conhecimento,!
Sua didática é muito boa, cara! Parabéns! E muito obrigado pelo conteúdo.
Valeuuu Marcos! Abraços.
Muito obrigado pelo vídeo. Ajudou demais
Muito bom seus videos, show de bola Vinicius Dacal!!!! indicando vc para os meus amigos aqui!
Valeuuuuu demais Alexandre! Muito bom receber esse feedback. Vamos fazer esse canal crescer! Grande abraço man.
Você ganhou um novo seguidor!
Parabéns Pelo Video mano!
Parabéns pelo vídeo, ajudou bastante. Você tem a didática muito boa.
Que conteúdo top, muito bem explicado e sem rodeios. Estou começando agora no mundo do react e js, com certeza vou consumir todo o conteúdo do canal, valeu !
Valeuuu mano. Muito obrigado por estar acompanhando. Abraços.
Mais um conhecimento adiquirido...vlw!!!
Valeu Leonardo!
Ótimo conteúdo. Você explica muito bem e usando um exemplo limpo assim ficou ainda mais fácil para entender.
acompanho tudo , vlew por todos os videos , da para fazer um com validação usando material ui
Muito bom, parabéns pelo vídeo
Muito pratico e sem enrolação, consegui absorver muita coisa aqui, muito bom mesmo !
Bom demais! Abraços.
Valeuuuu Vinicius! Grande abraço.
Quero usar o mui. Ai como o usar o Field no lugar do TextField?
Vi que tem que usar as={TextField} mas não consegui ainda..
Ótimo conteúdo Vinicius, eu encontrei um problema no formik com inputs de arquivo, pesquisei na web e vi q o formik não tem compatibilidade com esse tipo de campo. Como faz pra fazer o upload?
Qual o nome da extensao que vc usa pra ver o state dos components no navegador?
Gostei bastante da sua explicação, parabéns! Você poderia fazer outro vídeo de como integrar o input as="select" com o Formik, seria bastante útil.
Aguardando ;)
Opa, saiu o vídeo! :)
uma integração com material-ui seria um video legal... ficou show parabéns!
Ajudou bastante ! Valeu!
Valeuuu Rafael. Fico feliz em saber que o conteúdo está ajudando. Grande abraço.
Show! Muito bom. Parabéns e obrigado!
eu consigo usar ele no Expo Cli?
Obrigado pelo ótimo video!
Estou tentando fazer um formulário de contato mas preciso ter acesso àquele evento padrão do submit, saberia me informar como posso acessar isso com o formik?
Desde já, obrigado!
Conteudo massa.
Estou tentando aplicar o formik num projetin
Mas vem cá, como eu faria para apagar o value do input depois do submit?
Fala man.
Tem sim, você pode utilizar o resetForm, passando initialValues pra ele.
Esses dois valores você recebe do próprio formik através das render props.
Grande abraço e muito obrigado pelo feedback.
@@viniciusdacal show!
ótimo video! vlw
Valeuuu André
mt bom, obrigado
Valeuuu Paulo!
Pô cara, excelente video. Tenho aprendido muito com seus videos. Mas uma dúvida aqui: Digamos que exista uma validação também do lado do servidor da aplicação web. Por exemplo, suponhamos que em um sistema não possa existir email duplicado, e o servidor informe isto ao cliente, por meio de uma api REST, ou qualquer outra forma. É possível, não só validar o formato do email, do lado cliente (com o formik), mas também pegar a mensagem de validação do lado servidor após a digitação do email? Valeu!
Fala Israel. Valeu demais pelos feedbacks.
Quanto a dúvida: É possível fazer esse tipo de validação sim, de três formas.
1 - Passando uma função validate direto no Field. Essa função pode ser assíncrona. Ou seja, ela pode fazer um request para a api para validar o email por exemplo.
2 - Implementando uma função validate e passando para o Formik. Essa função pode combinar o uso do YUP para validar o formato dos dados, e também pode fazer uma requisição para validar os valores dos campos.
3 - Se quiser validar somente no submit, você pode fazer com que a api retorne os campos e seus respectivos erros e aí pode utilizar a função setErrors({ campoA: 'erro', campoB: 'erro' }) para mostrar os erros no formulário.
Grande abraço.
Como você acrescentar o COmponents no seu devtool?
Fala Bruno, beleza?
Precisa instalar o react-dev-tools no chrome. Vou deixar o link aqui:
chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Ótimo vídeo amigo, obrigado por compartilhar seu conhecimento com a gente, mas fiquei com uma duvida, como ficaria para aplicar um input com mascará, exemplo: CPF, CNPJ, Datas... enfim, usando o Formik? não encontrei nada na documentação...algum exemplo?
Fala Maicon, tudo certo?
Para aplicar máscaras, é necessário implementar um componente específico.
Esse componente receberia as props value e onChange e teria que lidar com o fluxo de aplicar a mascará para a visualização do usuário e limpar os dados antes de enviar para a função onChange.
Vou gravar um vídeo sobre esse assunto, ficará mais fácil de entender.
Grande abraço.
Fala Vinicius blz amigo, excelente aula. Uma pergunta como fazer para os campos serem limpos ao submeter o formulário? Abraço e obrigado pela aula.
Fala emerson! Fico feliz que tenha gostado.
Lá no onSubmit, você tem acesso as actions.
Você pode fazer o seguinte:
actions.resetForm({ values: { name: '', email: ''} });
Você também pode extrair esse valor para uma variável initialValues, para utilizar tanto na hora de passar as props, quanto passar no resetForm.
Qualquer dúvida, estamos aí.
Grande abraço.
@@viniciusdacal Obrigado por sempre nos responder, vlw mesmo.
Massa. segunda parte talvez seja usar o yup pra esquematizar os inputs
Fala João, tudo bem?
Não entendi muito bem essa parte de esquematizar os inputs? seria para a validação? ou é para fazer um cast dos valores?
Grande abraço.
Validaçao mesmo. Pq yup determinar tamanho max e min do string. Nao sei se o Formik faz
fala Vinicius, blz cara? entao cara, o que vc acha do Nextjs? poderia fazer um video explicando a diferença, por que usar Next ou create-react-app. abraço
Fala Rafael. Cara, só ouço coisas boas dele. Eu trabalhei com ele já faz bastante tempo, acho que foi 2016 ou 2017. O projeto evoluiu bastante de lá pra cá. É uma excelente ideia. Vou me programar para gravar sobre ele! Valeu pela dica.
É possível utilizar com react-input-mask ?, tentei dessa forma , mas ele não recupera o valor, alguém já conseguiu utilizar o formik utilizando mask??
Fala Fabricio!
Você pode tentar criar um custom fields , que utiliza o react input mask por baixo.
Eu ainda vou gravar um vídeo ensinando a criar esses custom fields, mas até lá, tem alguns exemplos na documentação:
formik.org/docs/api/useField.
Qualquer dúvida, da um toque.
Abraços.
Cara muito bom todo seu conteúdo. Obrigado por sua dedicação... Se quisermos colocar em produção esses projetos com a api como é feito ?
Fala Patrik! Valeu demais pelo feedback. Cara, tem alguns servidores gratuitos como netlify e vercel. Vou abordar mais sobre deploy nos vídeos sobre nextjs, que pretendo gravar mais adiante.
Seria otimo tbm fazer video sobre steps form.
Excelente dica!
@@viniciusdacal Não sabia que o formik tinha um pouco de validationSchema. Mas pelo q vendo aqui parece q tem.
Conteudo sensacional vinicius, gostei bastante da fonte do seu editor, qual é?
Valeuuuu Eduardo. A fonte é a "Operator Mono". Abraços.
Olá Vinícius dacal qual a diferença entre a sua série de react já para iniciantes e a série do formulário qual é o curso para a pessoa aprender
Qual a diferença entre a série formilk e react já são a mesma coisa?
Me explique melhor Por favor?
Boa noite José.
A série ReactjS para iniciantes ensina a criar uma aplicação do Zero. A intenção é ensinar react, mas sem utilizar libs.
Esses vídeos do Formik, já considera que a pessoa já sabe trabalhar com o React e só está em busca de aprender o Formik.
Vlw mano, esclareceu demais!!
Que massa Rodrigo! Fico feliz que o conteúdo tenha ajudado. Abraços man!
A nível de curiosidade, qual a fonte você está usando no VSCODE?
Fala Vinicius! Eu uso a "Operator Mono"
Tentei fazer o seguinte schema.js para que a letra fique maiúscula ao digitar o nome, mas não funcionou, alguma dica pessoal?
*name: Yup.string().uppercase().max(40).required()*
Fala Alexandre!
Uma forma que talvez funcione, seja passar um onChange para o seu input. Nesse onChange, você recebe o valor, converte para uppercase e utiliza o setFieldValue para setar o valor em uppercase para o formulário.
Outra forma seria implementar um custom field. Dentro dele, você transformaria o valor para uppercase, antes de chamar o onChange, que passa o valor para o formik.
A primeira opção é a mais direta, e a segunda opção é melhor se você precisa reutilizar isso em vários lugares.
Abraços.
@@viniciusdacal Brigadão, clareou tudo agora.
boa valeu (Y)
valeuu