Validando campos CONDICIONAIS em formulários no React

[@devjunioralves]

INFORMAÇÕES IMPORTANTES 👇 Passo a passo de como criar as mascaras: kzbin.info/www/bejne/bpDJkHeHgb2Gabs Formulários like a PRO: kzbin.info/www/bejne/l6i4dmymaq6Hh6M Livros que eu recomendo 📚: Código Limpo amzn.to/3hHXVKY Como ser um programador melhor amzn.to/3POQ5fq Arquitetura Limpa amzn.to/3Viqw7v Estruturas de dados e algoritmos com JavaScript amzn.to/3hM0L1u Entendendo Algoritmos: Um guia ilustrado para programadores e outros curiosos amzn.to/3BWsaEO 14 hábitos de desenvolvedores altamente produtivos amzn.to/3uZqsyy Hábitos Atômicos amzn.to/3FGllIM Aprendendo a Aprender amzn.to/3WxM0hG Rápido e devagar amzn.to/3PLrYhq A vida dos Estoicos amzn.to/3vaQIGl Meditações de Marco Aurélio amzn.to/3joFYS1

[@joaovictormilhomem4590]

Precisava exatamente dessa informação e estava com preguiça de procurar nas docs, obrigado!

[@camillotargas3133]

Parabéns pelo vídeo! De onde vem o cpfMask e o cnpjMask, é uma função que você criou, como fazer?

[@devjunioralves]

Valeu Camillo! Sim, são funções que eu criei, são apenas aplicação de regex, tem outro vídeo aqui no canal onde eu mostro e ensino conceitos de regex.

[@gfgarcia_2007]

Muito show o vídeo. Senti falta de algumas explicações sobre os atributos e métodos que são implementados, podem ser rápidas ou superficiais, mas para entender o porque estou inserindo o criteriaMode, o que significam essas issues do zod e o que é o inclusive, por exemplo. Valeu e siga com o ótimo trabalho!

[@devjunioralves]

Valeu Guilherme! Existem outros vídeos sobre formulários (vários inclusive hehe) onde explico mais, foco em outros detalhes, recomendo muito você dar uma olhada.

[@sherwik_]

Em qual video do canal encontro sobre a função maskCPF, que usou nesse video? Seus videos são muito bons, acompanho direto!

[@devjunioralves]

Ainda não tem nenhum vídeo onde mostro essa mascara de CPF Mauricio :/ Mas posso fazer, até pra explicar um pouco de Regex. E valeu demais, fico feliz em saber que tu ta curtindo os vídeos! 👊

[@luishenriquerusso2654]

De onde vem a função CNPJ mask??

[@devjunioralves]

@@luishenriquerusso2654 é uma função que tenho na pasta constants. Basicamente é uma função que recebe uma string e aplico um regex e retorno a string formatada.

[@lucastrismegisto8649]

@@devjunioralves gostaria muito de um vídeo explicando sobre

[@eduardosantos3516]

Poderia explicar como criar essas masks 🎭

[@devjunioralves]

Boa Eduardo, o link ta do comentário fixado.

[@CarlosHenrique-mx9ti]

Primeiramente parabens e obrigado vídeo, muito explicativo. Uma duvida, caso eu precise adicionar varios campos, como poderia fazer? Tipo um botão que quando clicado fosse criando inputs

[@devjunioralves]

Valeu Carlos! Tu usaria o useFieldArray do RHF pra fazer isso. Na playlist de formulários aqui no canal, tem um vídeo que falo sobre isso, confere lá, tu vai curtir.

[@delanoalmeidafilho1389]

Alguem ja passou por essa situação aqui: imagine que vc precisa fazer um crud de produtos q possuem uma rota para preencher seus campos na api e outra pra fazer upload de imagem. O problema maior eh quando atualizar esse produto, pois nem sempre vc vai precisar atualizar a imagem e os campos juntos. Ou seja, controlar qual chamada a api vc quer, a de atualizar a imagem ou a dos campos ou mudar tudo. Ademais, vlw pelo conteúdo

[@delanoalmeidafilho1389]

Tvz o que foi mostrado no vídeo pode resolver. Por exemplo, criar um chackbox perguntando se quer atualizar a imagem do produto e aí sim, aparecer a opção de atualizar a imagem. E tb controla se vai ser uma ou 2 chamadas pra api. Isso deve tá confuso, mas se alguém conseguir entender e tiver outra ideia manda ae pf. Tb pensei em ser um modal só pra atualizar a imagem tb

[@felipereserva8331]

teria como trazer um vídeo sobre cookies no next13 ? ou um exemplo de como fazer uma validação/autenticação de login de usuário

[@devjunioralves]

Fala Felipe! Quero trazer um vídeo sobre autenticação no Next.js 13.

[@rataria3891]

Uma duvida, para performace e melhor usar o state &&() que ele vai remove esse input do html caso esse state for "false" ou usar dataset do html e passamos o state como valor desse dataset e no css usamos display none para esconder ele caso for false ?

[@felippefms]

Faz um video usando o redux com o novo nextjs usando a appdir? Nao estou conseguindo mais pfv

[@devjunioralves]

Fala Felipe, blz? Então, eu quase não utilizo Redux no dia a dia, e dependendo do seu caso, tu não vai precisar ele no Next.js 13. E se de fato precisar de um state management, tu poderia testar o Zustand (que tem vídeo aqui no canal de como utilizar ele com o Next.js 13 e a appDir). Aliás, esse vídeo do Zustand + Next.js 13 pode te ajudar com os problemas que esta enfrentando com o Redux.

[@gabrielfelipemanica7391]

Opa uma dica, coloca com o que vai estar trabalhando no título do video (zod e react form hook nesse caso) pra se tornar mais fácil encontrar o seus videos...

[@viniciusuchoas8385]

Ele não funciona sem o 'use client'? Como fica o SSR disso? Pra mim deu vários erros de createContext e hydration. Abraços

[@devjunioralves]

Sempre que você precisar de interação do usuário, precisa ser um client component Vinícius. Tem um vídeo aqui no canal onde explico melhor as diferenças entre RSC e RCC.

[@alveselivelton]

Uma dúvida, se eu quiser fazer um formulário de edição, onde eu preciso que o formulário já esteja preenchido com os dados de uma função assíncrona, como o react query, por exemplo, como eu faço pra preencher os campos com o retorno da api? Seria no Default Values? Ps. Vídeo excelente.

[@devjunioralves]

Excelente pergunta Elivelton! Sim, tu pode usar o defaultValue. Porém, se tiver utilizando o RHF, ele tem uma função chamada setValue que é exatamente para esses casos, tu passa o campo e o valor e ele atualiza. Valeu demais!

[@alveselivelton]

@@devjunioralves Ah sim, maravilha.

[@half7752]

junior, pra auth no next js. c usa o next-auth ou faz na mao mesmo? to procurando video de autenticação no youtube e so tem gente usando lib e queria fazer na mao

[@devjunioralves]

Depende Rafa, se tu tem um backend próprio, eu geralmente faço "na mão", se não tiver, usa o Next-Auth.

[@half7752]

@@devjunioralves tenho um backend proprio, o b.o é que so acho video e artigo com next auth KKK, se puder trazer um video sobre autenticação ia ajudar dmss

[@devjunioralves]

@@half7752 Entendi, vou trazer sim Rafa!

[@thiagonunesmiziara6866]

Poderia fazer um video fazendo um wizardform

[@devjunioralves]

Perfeito Thiago, quero fazer sim!