Acabamos de concluir o aprendizado sobre formas angulares orientadas por modelos e também,
no exercício, construímos nossa primeira forma orientada por modelos.
Agora, quando o usuário digita informações nos campos do formulário,
podemos desejar validar os dados que o usuário digita nesses campos de dados.
Nos primeiros dias da web,
a única maneira de verificar os dados era enviar os dados
para o servidor e, em seguida, fazer as verificações no lado do servidor,
e, em seguida, obter o resultado do lado do servidor.
Mas hoje em dia, com poderosos frameworks do lado do cliente como Angular,
uma grande parte da validação de dados pode ser facilmente realizada no lado do cliente
e podemos facilmente capturar muitos dos erros no lado do cliente,
e, em seguida, até mesmo fornecer indicação ao usuário sobre os erros.
Agora, este é o lugar onde vamos olhar para o suporte Angular para a validação de formulário
e, em seguida, como podemos realizar a validação de formulário,
e, em seguida, mostrar mensagens de erro para o usuário nas visualizações.
HTML5 já vem com algum suporte incorporado para validação de formulários.
Mas quando estamos usando Angular para nossa aplicação,
temos que primeiro desligar a validação do formulário HTML5,
para que a responsabilidade de fazer validação de formulário
seja transferida para o aplicativo Angular.
Então, para fazer isso para o formulário,
como vimos no exercício anterior,
nós incluímos o atributo novalidate para a tag de formulário lá,
de modo que isso garante que o
angular assume a responsabilidade de fazer validação de formulário.
Como o Angular nos ajuda a fazer validação de formulários?
Isso é o que vamos examinar com mais detalhes a seguir.
Sempre que você precisa fazer validação de formulário em Angular,
especialmente quando você precisa fazer referência aos campos de formulário dentro de seu modelo,
então você precisa da ajuda de variáveis de referência de modelo Angular.
Como especificamos uma variável de referência de modelo?
A variável de referência de modelo pode ser especificada para
qualquer elemento, associando uma variável de modelo como esta.
Por exemplo, neste caso para formulário,
estamos especificando o formulário de login igual ao NGForm.
Da mesma forma, para um campo de entrada, por exemplo,
você diria barra,
ou melhor #username é igual a ngModel.
Nesse caso, o formulário de login e o nome de usuário são todas variáveis de referência do modelo.
Essas variáveis de referência de modelo podem então ser usadas dentro
nosso modelo Angular para fazer referência a esses campos.
Então, no próprio modelo,
você pode verificar os estados de controle para
esses campos incluindo coisas como se o campo é válido,
se é sujo,
ou tem alguns erros.
Vamos aproveitar esse suporte que a Angular fornece para fazer validação de formulário.
Como mencionei, vamos aproveitar
as variáveis de referência do modelo para reunir o estado de controle para verificar se há informações.
Então, por exemplo, você pode dizer username.pristine dentro do seu modelo.
Então, que se refere a verificar para o estado,
se o controle particular está no estado intocado,
o que significa que ele não foi tocado e modificado pelo usuário até agora.
O sujo é oposto de intocado,
o que significa que quando um campo está sujo,
então isso significa que o campo foi modificado pelo usuário no passado.
Da mesma forma, o estado de controle válido e inválido
nos permite verificar se as informações dentro desse campo são válidas ou não,
dependendo da especificação do seu cheque
para a validade ou o estado inválido desse campo específico.
Assim, por exemplo, você pode verificar se você declarou um campo como obrigatório,
isso significa que você esperava que o usuário
digite pelo menos algumas informações no campo.
A ausência de informações dentro do campo em seu formulário significa que o campo é inválido.
Da mesma forma, você pode especificar o continente ou o comprimento máximo de um valor de campo,
para que você possa facilmente verificar se o número de caracteres
dentro de um campo é aproximadamente o comprimento principal,
ou abaixo do comprimento máximo, e assim por diante.
No exercício que se segue,
aplicaremos essas várias abordagens de validação de formulário para
nossa forma orientada por modelo que projetamos no exercício anterior.
Como exemplo, em seu formulário,
você pode desativar o botão enviar verificando para
ver se esse formulário está no estado válido ou não.
Então, neste caso, você associará o
desabilitado e definirá igual ao formulário de log.form.invalid,
significa que quando o formulário é inválido,
este botão será desativado neste caso.
Assim, o usuário não terá permissão para enviar as informações através deste formulário específico.
Então, esta é uma maneira de garantir que
entradas incorretas não serão enviadas pelo usuário através do formulário.
Da mesma forma, para campos específicos,
você pode verificar se o campo foi preenchido ou não.
Então, se você especificar que um campo específico é obrigatório
especificando o atributo obrigatório para o campo de entrada,
então você pode verificar se há um erro de
o tipo necessário gerado para o elemento de campo particular lá.
Então, no seu código, por exemplo,
você pode até especificar para informar o usuário sobre
o fato de que um determinado campo está incorreto.
Você usa o erro de mat-para significar isso.
Então, a tag mat-error, que vem de,
novamente, o suporte de formulário de material angular como você vê aqui,
se o nGif for verdadeiro,
então essa mensagem será exibida abaixo no campo de entrada lá,
e semelhante ao campo de entrada,
será marcado como vermelho na tela.
Então, isso é algo que você vai estar verificando e
garantindo e também entregando mensagens de erro para o usuário.
No exercício que se segue,
aplicaremos esta abordagem para verificar o nome de usuário e a senha.
Vamos especificar que esses campos são obrigatórios e se o usuário
não digitar nenhuma informação nesses campos após o campo ter sido tocado,
então vamos garantir que a mensagem de erro apropriada é exibida para o usuário.
Então, com esta rápida compreensão de validação de formulário em Angular,
vamos passar para o exercício,
onde vamos verificar como podemos fazer validação de formulário simples para
nosso formulário de login e, em seguida, ser capaz de exibir mensagens de erro.
Voltaremos novamente à validação de formulários em um dos exercícios posteriores,
depois de termos aprendido mais sobre o suporte reativo em Angular.