Aula 51
Refatorizamos o validateField Para Desabilitar o botão de OK Corretamente
Summary
Resumo da Discussão sobre a Função validateField
Problema Identificado
- A função
validateField
estava modificando automaticamente o estado de erro (postError
) ao ser chamada, resultando na exibição de erros antes da interação do usuário com o formulário. Isso não é desejável.
Solução Proposta
- Alterar a definição da função
validateField
para que ela apenas retorne a descrição do erro, se existir, sem alterar o estado do erro diretamente. A implementação deve ser independente do Redux, retornando apenas strings que descrevem os erros de validação.
Etapas da Mudança
-
Modificação da
validateField
:- Remover a chamada que altera o estado do erro.
- Retornar a descrição do erro, se houver, ou retornar
null
se não houver erro.
-
Atualização das Funções Dependentes:
- Alterar o método
onChange
e outros métodos para usar a nova lógica davalidateField
. Agora, após chamarvalidateField
, o erro retornado será utilizado para atualizar o estado do formulário.
- Alterar o método
-
Implementação de Lógica de Habilitação do Botão:
- Criar uma nova função
canSubmit
que verifica se o formulário pode ser submetido, considerando as validações implementadas. O botão de submissão será desabilitado se houver erros nas validações.
- Criar uma nova função
Detalhes Técnicos
- A validação agora retorna:
- Um string com a descrição do erro se o valor for inválido.
null
se o valor estiver correto.
- A lógica do estado do formulário foi ajustada para refletir essas mudanças, garantindo que o botão de submissão atue corretamente com base nas validações.
Conclusões
- As alterações garantiram que os erros não apareçam antes da interação do usuário, tornando a experiência mais intuitiva.
- A refatoração simplificou a função
validateField
, tornando o código mais modular e fácil de manter.
Observação Final: O autor sugere feedback ou discussão sobre o tópico nos comentários.
Video Transcript
mas tem um problema com a definição do nosso validate field agora que eu estava pensando aqui
a gente quer que esse dissembol aqui quando a gente chama o validate field quer que o aconteça
vamos voltar a definição aqui a validate field como estava definido agora
ela chama esse change post error e se a gente chamar o validate field para ver se o formulário está valido
não vai mudar o post error e vai aparecer aqui o que vai aparecer o erro automaticamente
inicialmente isso você note que eu salvei apareceu eu aqui deixa eu reiniciar
quando eu clico novo já aparece o erro lá automaticamente a gente não quer isso né
embora que seja um erro mas a gente não quer que isso que apareça antes de o usuário interagir com esse campo de texto
então a gente vai ter que mudar a definição do validate field então a gente não quer que mude o post error diretamente dentro da validate field
a gente quer definir a validate field de uma maneira assim
o validate field vai pegar a field e vai validar e se tiver um erro vai só retornar a descrição do erro
e quem quiser fazer alguma coisa com o erro que pode fazer que faça nesse caso o validate field só vai retornar um string com o erro
e quem usou essa função vai ter acesso a esse erro e pode chamar essa função lá de fora para realmente modificar o estado aplicativo e adicionar a descrição do erro
certo então a gente vai pegar e tirar esse cara para o validate field ficar independente de estar usando o redux ou não
essa é a action creator
tá bom então eu vou remover esse cara aqui
desse ponto props change post error certo e vou retornar só o esse string aqui
e para o else case a mesma coisa é só retornar não
então quando eu chamar o validate field com a field que tem um nome valor e label
se o valor for string vazia vai estar em valor a gente retorna o erro com a descrição a descrição do erro não pode estar em branco
e se não tiver nenhum erro vai retornar não
agora vamos voltar para o ontar o change e o body change para modificar para usar essa nova versão
então desse modo valor de fio título não sei o que não sei o que esse cara vai retornar o erro então vou chamar aqui
title error certo dessa maneira aqui a gente punir o error e vai chamar aqui depois de postar o change post error e o que a gente tinha antes
tinha o field né o nome que esqueci já cadê deixa eu voltar o reducer
só para ver a gente está pegando essa action pt payload vai ter a field vai ter o error
a set change post error em um lado actions cadê o change post error a definição
só para ver aqui confirmar a primeira argumenta a field e o segundo é o error e a payload passa o field e o error
certo então qual é a fio daqui o primeiro argumento vai ser um title e o segundo vai ser o erro descrição do erro
certo então chama validate field que agora vai só retornar a descrição do erro ou retornando se tiver o erro
aí você chama o post error vai setar o title o erro do title aqui com essa descrição ou valor não se não tiver o erro
certo o title error do reducer lá da mesma maneira vamos fazer um body change
vai botar esse validate field const body error desculpa e vai chamar o desfondo change post
o próximo change post error com qual é a field o nome é body e qual o erro a descrição body error
ou não se não tiver o erro certo salvar agora vamos aqui ver como é que vai aparecer aqui
ok tá tudo ok note o botão de ok já não funciona mais estou tentando clicar e tá correto
certo então o que a gente fez vamos recapitular aqui a gente estava fazendo o disable aqui do botão de ok a gente notou que
inicialmente não tinha erro não tinha validação inicial e se a gente chamasse o valor de fio o definir com a definição original
apareceria o erro automaticamente antes do usuário interagir com o formulário mas isso não é o que a gente quer então a gente teve que mudar a definição
da valor de fio para em vez de ser dependente da chamada do action creator chamada change post error o valor de fio agora se tornou uma função independente do
dox isso retorna só só olha na field o valor e se tiver em valor retorna um string com a descrição do erro se não tiver não é isso retorno no
e com isso a gente modificou o entire change body change para usar esse seu novo definição chama aqui post error e change post error
depois no final aqui com a descrição do erro ou não se não tiver nenhum erro e por isso agora quando a gente chama o desmodo valor de fio retorno string
que nesse caso vai ser true e verdadeiro tem o valor verdadeiro no JavaScript e você pode usar aquele técnico para forçar ser bullying ou não precisa
então o botão de ok vai estar desabilitado se o título estiver incorreto se tiver um erro que esse cara retorna um erro nesse caso se eu digitar alguma coisa note que o botão de ok já está funcionando de novo porque mas não está correto ainda porque a gente tem que
validar o conteúdo também então esse cara vamos pegar aqui tem que adicionar também ou desse muito vale de fio qual o nome body e qual é o valor desse ponto props ponto body certo salvar aqui e
vamos ver aqui digitou o título deixa eu digitar uma coisa deixa reiniciar tudo desculpa vai para o novo digitou o título tira não dá para clicar ok vou digitar não dá para clicar ok certo não dá para clicar ok distrito título não dá para que ok digita o conteúdo agora sim
certo não acho que esse cara está longo para caramba que então normalmente vamos extrair esse cara e fazer a própria função então vamos fazer a função sei lá
vamos fazer a função chamada sei lá can
vamos fazer a função chamada que submita pode submeter
então eu vou desabilitar se o formulário não poder ser submetido
vou lá em cima
vou fazer essa função quem submete
vou colar aquele código e vou só retornar
e aí
não acho que eu usei a função de flash com o property initializer porque eu estou referenciando desse ponto props aqui
para fazer o bind desse cara a palavra chave des para ser se refiri a postform
como a função de chave não define seu próprio contexto e o contexto da palavra chave des vai ser da função ou daquilo que cobre que encobre a função de flash nesse caso o componente postform
o opcente certo então essa função que só retorna o valor desses dois caras
se quiser quebrar a linha aqui eu sei lá
faço o jeito que quiser mas está aí então essa função aqui retorno que retorna
desculpa está errado esse cara aqui vale de fio retorno erro e o erro é um valor verdadeiro
a string né por isso a gente quer retornar o que para poder submeter o formulário esse cara tem que ser não
significa não ter erro então vou falar assim
ou esse cara aqui
não ou mas aí esse cara aqui
também for não nesse caso se for não não tem erro não vira verdade com a negação e quando esses dois caras essas duas condições por
satisfeitos nós podemos submeter o formulário
certo então por isso que a gente pode usar dessa maneira será que eu posso submeter vou desabilitar se eu não puder submeter
salva aqui des ponto can submite tem que chamar a função está dizendo que não é uma função o que que eu fiz aqui de errado
que é a sua mente
a gente é tudo
novo post
não funciona está aí só para você reedinciar não funciona digita não funciona digita agora funciona certo
isso foi a nossa refatorização aqui só para poder fazer esse cara do disabled funcionar corretamente
espero que tenha gostado do vídeo deixe comentar se tiver uma dúvida ou só para discutir o assunto e até a próxima
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: