Gerando slug usando React Hook Form

[@edsonhh]

Caracaaaa.. tava mexendo com formulario hj e vi exatamente isso!!!

[@Katori_77]

Já já a palavra tag vai virar uma palavra reservada no javascript pelo Diego KKKKKKK

[@danielmonaro4835]

Gosto demais de utilizar os popups e os componentes do shadcn, como faria para fechar ele em uma função depois de criar algo por exemplo, sem utilizar estados

[@vieira-nerd]

Lá no final do video o SLUG veio vazio novamente. shauhsuau

[@versaleyoutubevanced8647]

KKKKKKK

[@matheusf6540]

Sim kkk

[@danielcti]

Será que é por causa do value={slug} no input?

[@matheusf6540]

Acho q usando o setValue do useform funcionaria ​@@danielcti

[@GabrielLourencoM]

Ele apenas guardou o valor do name manipulado na função. O correto seria utilizar o setValue do Hook form, passando o field e o valor dele.

[@bbarreto18]

alguem sabe porque o .refine() do zod com react hook form / zodResolver nao valida automaticamente/ao vivo apos o submit? todas as outras validacoes sao verificadas automaticamente, porem as validaçoes customizadas com o .refine() so sao feitas no submit do form

[@zoiverd]

Use o .partial()

[@bragancx]

Pra quem ficou com dúvida, o slug estava vindo vazio por conta de que o react hook form atualiza os valores de um input somente quando o input é alterado manualmente ou quando é usado a função "setValue". Existe varias abordagens para resolver esse problema, porém, uma bem simples, seria criar um useEffect onde rodaria um 'setValue("slug", watch("name"))', e que a dependência do useEffect seria o 'watch("name")' , então ele sempre atualizaria o input do "slug" quando o input "name" fosse alterado, o que também deixaria também o campo slug alterável por si só, em vez de travado baseado no "name". Exemplo: useEffect(() => { setValue("slug", watch("name")) }, [watch("name")])

[@gabrielalcantarabernardes8425]

senão me engano você pode passar um valor padrão para o watch caso não exista o valor no primeiro render, watch("name", "")

[@kassiogluten]

Um simples defaultValues resolveria

[@BiancaFiltreL]

Achei o título do vídeo ruim Achei que ia falar dar funções de reset do form e defalutValues

[@rogerbarreto2281]

Eu estava esperando por isso também

[@maua3000]

Esse projeto tem no ignite?

[@Tomita84]

Onde consigo baixar esse projeto usado no video? Qual o repo dele no github?

[@dodijacobs]

Diegão, no final acabou que o slug ficou vazio novamente

[@DiogoScarmagnani]

Amigo os seus vídeos são excelentes mas por favor aumente o tamanho da fonte. No celular fica ruim para ver.

[@VictorCostaDev]

Alguém sabe qual extensão o Diego usa para deixar o package-lock.json oculto e o package.json "parecendo uma pasta"? achei bem interessante/útil

[@clintonrocha4980]

é uma config no vscode, acho que ele postou um gist no twitter mostrando como faz

[@VictorCostaDev]

@@clintonrocha4980 Entendi, achei que fosse uma extensão, vou procurar no twitter esse gist então

[@viniciuscolodetti]

Qual é esse projeto na plataforma?

[@dodijacobs]

também tenho curiosidade em saber

[@williampl7082]

qual é esse programa/extensão que vc utilizou o GPT? 07:30

[@rafaelsantana588]

Raycast

[@Matheus_1582]

Eu queria ver o Diego usando a linguagem ReScript.

[@gabrielsantana5153]

Qual a extensão que ele usa pra esse console.log em tempo de execução e qual a extensão pra abrir o chatGPT? Alguém helpa o mano aqui pls

[@dirosaki]

Console Ninja

[@dirosaki]

Raycast para o ChatGPT é um plugin do Mac

[@caiqueroliveira]

Quem aí lembra do unform kkk

[@CaioCesarPS]

Qual projeto é esse do ignite? alguem sabe?

[@Victor5163]

Também queria saber.

[@dodijacobs]

@@Victor5163 eu também

[@fernandodebarros4312]

Mas quando que vale a pena usar o zod? Pra mim só fazer uma validação usando um if else tá ótimo ou regex

[@vieira-nerd]

Pra quem ta começando a usar typescript ou quem busca uma oportunidade no mercado já é bom começar a usar pq muitas empresas já usam essa lib.

[@NetoNeto]

Talvez para um caso desses aí do vídeo na faz mesmo sentido. Mas quando tu está dentro de algo maior, formulários com muitos campos, e cada campo com várias regras diferentes (email, cpf, datas, etc), tu vê o quanto isso faz sentido. Outra coisa que ele não mostrou aí, é mostrar as mensagens de erro. Nesse caso aí, graças ao resolver, o zod joga as mensagens de erro já dentro do react hook form, marca os Campos como inválidos, etc. se tu fosse fazer esse tanto de coisa com if, imagina a confusão que tu ia ter no final

[@devinicin]

estava mexendo num formulário hoje e me deparei com uma situação quando eu precisava tipar um campo como email e opcional, no final acabou ficando assim: email: z.string().email('Email inválido').nullable().or(z.string().max(0).nullable()), eu precisava verificar o email pra ver se era válido, mas ao mesmo tempo não poderia travar meu formulário pq o email era um campo opcional... no final das contas ainda tive que ajustar o campo na hora da requisição como null para não ter problemas no backend ;-;

[@bbarreto18]

z.string().email().optional() nao resolve?

[@devinicin]

@@bbarreto18 não, e aparentemente não é pra funcionar mesmo