Agora que aprendemos sobre o suporte de validação de formulário orientado por modelo
no Angular na palestra anterior,
vamos aplicar o que aprendemos para
o formulário de login que projetamos no exercício anterior.
Faremos validação de formulário simples para o formulário de login.
Em particular, vamos especificar o nome de usuário e senha conforme necessário,
e, em seguida, verificar para garantir que o usuário digita informações nesses campos,
e ser capaz de exibir mensagens de erro quando os campos estão vazios.
Vamos prosseguir com esta modificação para o aplicativo neste exercício.
Para começar neste exercício,
vamos para o formulário de login aqui,
que temos no modelo de componentes de login aqui.
Nós já adicionamos no atributo novalidate ao formulário de login.
Então, vamos adicionar na variável de modelo chamada LogInform para este modelo,
e, em seguida, definir isso para ngForm como nós entendemos a partir da palestra anterior aqui.
Então, fazendo isso,
estamos especificando que essa variável de modelo nos permite rastrear o estado do formulário.
Então, podemos até verificar o estado válido ou inválido para este formulário.
Agora, além disso, para cada uma dessas entradas,
também adicionaremos as variáveis de modelo correspondentes aqui.
Então, deixe-me ir para a próxima linha aqui,
e lá eu vou dizer nome de usuário é ngModel.
Em seguida, também especificaremos isso conforme necessário aqui.
Da mesma forma, para a senha,
vamos adicionar na variável de modelo correspondente aqui como senha está em ngModel,
e, em seguida, especificar isso conforme necessário aqui.
Então, agora que especificamos as variáveis de modelo,
podemos então realizar algumas das verificações de validação de formulário aqui.
Agora, como estamos especificando isso como obrigatório,
isso significa que se esses campos,
os campos de entrada estiverem vazios,
então o erro necessário será sinalizado para isso.
Da mesma forma, agora que temos a variável de modelo para o formulário,
podemos facilmente usar isso para verificar e desativar o botão Enviar abaixo aqui.
Então, para o botão Enviar,
o que fazemos aqui é usar
o campo desabilitado aqui,
e, em seguida, vamos definir o campo desabilitado
para Loginform.Form.invalid.
Então, ao fazer isso,
estaremos desabilitando este botão quando o formulário for inválido.
Assim, o usuário não pode sequer enviar o formulário quando o formulário contém entrada inválida.
Assim, por exemplo, se o nome de usuário estiver vazio ou a senha estiver vazia,
então o formulário de login será inválido,
e assim o usuário não poderá enviar este formulário.
Agora, esta é uma parte da validação de formulário que podemos fazer,
através da qual podemos impedir que o formulário seja enviado.
Além disso, para cada um desses campos,
podemos até exibir uma mensagem de erro para
indicar que tipo de erro está ocorrendo neste campo específico.
Então, para fazer isso,
para cada um desses elementos de campo de formulário,
vamos adicionar na tag mat-error lá,
e então vamos dizer parar nGiF,
e vamos dizer username.errors.
Então, observe que já demos a este modelo uma variável chamada nome de usuário,
para que possamos usar em username.errors se houver erros e
se esse tipo de erro for necessário.
Então, se o erro é um tipo necessário de erro que é causa lá,
então, nesse ponto,
podemos especificar que o erro correspondente a ser exibido é o nome de usuário é necessário.
Então, esse é o erro que vai ser exibido para este campo aqui.
Da mesma forma, deixe-me adicionar o mesmo tipo de coisa para o campo de senha aqui.
Então, deixe-me copiar isso e, em seguida, colá-lo aqui,
e, em seguida, vamos dizer senha.errors.
Em seguida, a mensagem será a senha é necessária.
Então, adicionando isso,
estaremos exibindo mensagens de erro abaixo
esses campos quando o campo não contém nenhuma informação.
Correção menor aqui.
Isso deve ser nome de usuário?errors.required aqui,
e da mesma forma, este também deve ser.required aqui.
Então, com essas modificações,
meu componente de login agora está pronto
para fazer a validação do formulário e, em seguida, exibir mensagens de erro.
Então, vamos salvar as alterações e, em seguida, ir e dar uma olhada no aplicativo atualizado.
Indo para o nosso aplicativo no navegador,
vamos abrir o formulário de login aqui.
Então, você pode ver que agora tanto o nome de usuário quanto a senha carregam
uma estrela lá para indicar que ambos são necessários.
Então, deixe-me digitar.
Então, aqui, você vê que o formulário é válido porque ele contém informações,
e assim o botão Login será ativado.
Deixe-me remover as informações do campo de senha,
e, em seguida, você percebe imediatamente que
o erro é indicado aqui dizendo que a senha é necessária.
Observe também que o botão Login não será mais ativado.
Será desativado. Então, você não poderá enviar o formulário aqui.
Mas no momento em que eu preencha algo na senha,
então o botão Login será ativado,
e poderemos enviar o formulário aqui.
Da mesma forma para o nome de usuário.
Se eu remover as informações de nome de usuário lá,
então você verá o erro sendo exibido aqui,
e também você verá que o botão Login não está habilitado neste ponto.
Então, é assim que a validação do formulário pode ser realizada neste caso.
Então, como você já viu,
adicionando na validação de forma simples ao nosso aplicativo,
podemos verificar para garantir que
os campos contêm as informações que eles devem conter,
e no formato certo.
Vamos examinar um pouco mais de que forma validação em um dos exercícios posteriores,
especialmente para formas reativas.
Com isso, completamos este exercício.
Este é um bom momento para você fazer um git commit
com os formulários orientados por modelo de mensagem, parte dois.