Aula 52
Mudamos a Cor do Botão de Ok Quando o Formulário Estiver Inválido
Summary
# Resumo do Vídeo: Mudança de Cor do Botão OK em Formulário
No vídeo, o apresentador discute a validação de um formulário para criar um novo post. A validação garante que, se o título ou o conteúdo estiver vazio, a borda do campo se torna vermelha e uma mensagem de erro é exibida. Além disso, o botão "OK" é desabilitado quando o formulário está inválido, impedindo sua submissão.
## Problemas Identificados
- O botão "OK" parece clicável mesmo quando o formulário é inválido, o que pode ser confuso para o usuário.
- A proposta é mudar a cor do botão "OK" para indicar que o formulário não pode ser submetido.
## Implementação
O apresentador utiliza uma função chamada `CanSubmit`, que determina se o formulário está em condições de ser enviado.
### Passos para a Solução:
1. **Localização do Código**: O apresentador navega até o projeto, no arquivo de template do formulário.
2. **Edição do Botão OK**: O estilo do botão original é definido com uma cor de fundo "antique white".
3. **Criação de Variável**: É criada uma variável `OK_background_color` para armazenar a cor do botão, que será alterada conforme a validade do formulário.
4. **Operador Ternário**: A cor do botão é definida utilizando um operador ternário. Se `CanSubmit` retornar falso, a cor muda para "light gray"; caso contrário, permanece "antique white".
## Resultados
Após a implementação, ao acessar o formulário, a cor do botão muda corretamente, refletindo a validade do formulário dinâmicamente.
O vídeo segue demonstrando essa mudança enquanto o usuário interage com os campos do formulário.
Video Transcript
Oi pessoal, nos vídeos passados nós fizemos a validação do formulário de criar um novo post.
Se o texto aqui do título ou do conteúdo estiver vazio depois que o usuário digita alguma coisa e remover tudo,
a carta de texto fica vermelha e aparece a mensagem de erro.
Nós também desabilitamos o botão de clicar OK.
Nesse caso eu estou tentando clicar mas nada acontece.
Mas quando eu digito os dois dá para clicar no OK.
Você nota que quando eu tento clicar aparece.
Mas só um detalhe nesse botão de OK que quando a gente remove o texto,
o formulário está invado mas o botão parece que dá para submeter mas não dá.
Então seria legal se o botão pelo menos mudasse de cor.
E esse é o objetivo deste vídeo.
Nós vamos fazer o botão mudar de cor se o formulário estiver inválido.
Para isso nós vamos utilizar aquela função que a gente criou chamada CanSubmit.
A função que é usada para determinar se o formulário estiver pronto para ser submetido.
Vou aqui no meu projeto, nosso projeto passSrc-components no arquivo postform
que é o template para esse formulário.
Vamos lá embaixo aqui, essa é a função aqui, CanSubmit que eu falei.
Lá embaixo aqui no botão de OK.
Deixa eu aumentar o texto um pouquinho.
Então o botão de OK está dentro do touchable opacity.
Deixa eu dar um...
Então você nota que a cor, o estilo do texto está definido inline com o background color antique white.
Mas nós queremos mudar essa cor se o formulário estiver inválido.
Certo?
Então a gente sabe que o formulário vai ser inválido quando essa função desse CanSubmit
retornar o valor que é falso, né?
Nesse caso com a negação, então significa que não pode ser submetido.
Então a gente vai usar essa mesma coisa aqui para definir um outro cor em vez do antique white.
Uma maneira para fazer isso é só definir uma variável aqui, vamos recortar esse antique white
e criar uma variável.
Você pode chamar OK background color, você pode chamar o de que você quiser.
Essa variável vai ser definida aqui antes do retorno da função render.
Const, OK background color.
Eu vou colar só o antique white para ver se não deu nenhum erro.
Vou salvar meu aplicativo automaticamente.
Então não teve problema, o botão ainda está naquela cor antique white.
Agora, o que a gente vai fazer? Eu posso fazer só um fstainer,
ou posso também fazer aquele operador alternário.
Então se o formulário, vamos chamar essa função para saber se o formulário pode ser submetido.
Se esse formulário pode ser submetido, vamos deixar na cor antique white.
Se não, a gente vai botar outra cor, vamos botar sei lá, light gray.
Certo?
Então, vamos ver esse negócio aqui.
Deixa eu aumentar a tela aqui.
Esse que é o operador alternário, é como se fosse um f,
checa essa condição aqui, se for verdadeiro retorna esse cara,
que vai ser armazenado no variável OK background color.
Se o can submet retornar o valor que for falso,
vai retornar essa light gray, que é a cor certa para o formulário que está inválido.
Vamos testar aqui.
Vou para o formulário, você note que já mudou o botão de OK.
Está light gray, e no momento que eu digito em todos os dois campos,
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: