1 00:00:04,070 --> 00:00:10,290 Acabamos de concluir o aprendizado sobre formas angulares orientadas por modelos e também, 2 00:00:10,290 --> 00:00:14,300 no exercício, construímos nossa primeira forma orientada por modelos. 3 00:00:14,300 --> 00:00:18,210 Agora, quando o usuário digita informações nos campos do formulário, 4 00:00:18,210 --> 00:00:23,655 podemos desejar validar os dados que o usuário digita nesses campos de dados. 5 00:00:23,655 --> 00:00:25,630 Nos primeiros dias da web, 6 00:00:25,630 --> 00:00:28,950 a única maneira de verificar os dados era enviar os dados 7 00:00:28,950 --> 00:00:32,580 para o servidor e, em seguida, fazer as verificações no lado do servidor, 8 00:00:32,580 --> 00:00:37,155 e, em seguida, obter o resultado do lado do servidor. 9 00:00:37,155 --> 00:00:41,935 Mas hoje em dia, com poderosos frameworks do lado do cliente como Angular, 10 00:00:41,935 --> 00:00:46,580 uma grande parte da validação de dados pode ser facilmente realizada no lado do cliente 11 00:00:46,580 --> 00:00:52,070 e podemos facilmente capturar muitos dos erros no lado do cliente, 12 00:00:52,070 --> 00:00:56,885 e, em seguida, até mesmo fornecer indicação ao usuário sobre os erros. 13 00:00:56,885 --> 00:01:00,170 Agora, este é o lugar onde vamos olhar para o suporte Angular para a validação de formulário 14 00:01:00,170 --> 00:01:03,725 e, em seguida, como podemos realizar a validação de formulário, 15 00:01:03,725 --> 00:01:11,170 e, em seguida, mostrar mensagens de erro para o usuário nas visualizações. 16 00:01:11,260 --> 00:01:17,455 HTML5 já vem com algum suporte incorporado para validação de formulários. 17 00:01:17,455 --> 00:01:20,750 Mas quando estamos usando Angular para nossa aplicação, 18 00:01:20,750 --> 00:01:23,840 temos que primeiro desligar a validação do formulário HTML5, 19 00:01:23,840 --> 00:01:25,640 para que a responsabilidade de fazer validação de formulário 20 00:01:25,640 --> 00:01:29,750 seja transferida para o aplicativo Angular. 21 00:01:29,750 --> 00:01:32,240 Então, para fazer isso para o formulário, 22 00:01:32,240 --> 00:01:34,525 como vimos no exercício anterior, 23 00:01:34,525 --> 00:01:40,760 nós incluímos o atributo novalidate para a tag de formulário lá, 24 00:01:40,760 --> 00:01:43,910 de modo que isso garante que o 25 00:01:43,910 --> 00:01:47,585 angular assume a responsabilidade de fazer validação de formulário. 26 00:01:47,585 --> 00:01:50,645 Como o Angular nos ajuda a fazer validação de formulários? 27 00:01:50,645 --> 00:01:55,324 Isso é o que vamos examinar com mais detalhes a seguir. 28 00:01:55,324 --> 00:01:59,600 Sempre que você precisa fazer validação de formulário em Angular, 29 00:01:59,600 --> 00:02:05,570 especialmente quando você precisa fazer referência aos campos de formulário dentro de seu modelo, 30 00:02:05,570 --> 00:02:09,960 então você precisa da ajuda de variáveis de referência de modelo Angular. 31 00:02:09,960 --> 00:02:12,725 Como especificamos uma variável de referência de modelo? 32 00:02:12,725 --> 00:02:15,485 A variável de referência de modelo pode ser especificada para 33 00:02:15,485 --> 00:02:19,235 qualquer elemento, associando uma variável de modelo como esta. 34 00:02:19,235 --> 00:02:22,880 Por exemplo, neste caso para formulário, 35 00:02:22,880 --> 00:02:29,760 estamos especificando o formulário de login igual ao NGForm. 36 00:02:29,760 --> 00:02:33,160 Da mesma forma, para um campo de entrada, por exemplo, 37 00:02:33,160 --> 00:02:35,050 você diria barra, 38 00:02:35,050 --> 00:02:39,725 ou melhor #username é igual a ngModel. 39 00:02:39,725 --> 00:02:46,130 Nesse caso, o formulário de login e o nome de usuário são todas variáveis de referência do modelo. 40 00:02:46,130 --> 00:02:49,370 Essas variáveis de referência de modelo podem então ser usadas dentro 41 00:02:49,370 --> 00:02:53,800 nosso modelo Angular para fazer referência a esses campos. 42 00:02:53,800 --> 00:02:56,245 Então, no próprio modelo, 43 00:02:56,245 --> 00:02:59,060 você pode verificar os estados de controle para 44 00:02:59,060 --> 00:03:03,289 esses campos incluindo coisas como se o campo é válido, 45 00:03:03,289 --> 00:03:04,760 se é sujo, 46 00:03:04,760 --> 00:03:06,430 ou tem alguns erros. 47 00:03:06,430 --> 00:03:12,865 Vamos aproveitar esse suporte que a Angular fornece para fazer validação de formulário. 48 00:03:12,865 --> 00:03:15,964 Como mencionei, vamos aproveitar 49 00:03:15,964 --> 00:03:21,870 as variáveis de referência do modelo para reunir o estado de controle para verificar se há informações. 50 00:03:21,870 --> 00:03:27,370 Então, por exemplo, você pode dizer username.pristine dentro do seu modelo. 51 00:03:27,370 --> 00:03:30,440 Então, que se refere a verificar para o estado, 52 00:03:30,440 --> 00:03:33,960 se o controle particular está no estado intocado, 53 00:03:33,960 --> 00:03:39,080 o que significa que ele não foi tocado e modificado pelo usuário até agora. 54 00:03:39,080 --> 00:03:41,840 O sujo é oposto de intocado, 55 00:03:41,840 --> 00:03:45,050 o que significa que quando um campo está sujo, 56 00:03:45,050 --> 00:03:49,105 então isso significa que o campo foi modificado pelo usuário no passado. 57 00:03:49,105 --> 00:03:53,090 Da mesma forma, o estado de controle válido e inválido 58 00:03:53,090 --> 00:03:58,295 nos permite verificar se as informações dentro desse campo são válidas ou não, 59 00:03:58,295 --> 00:04:02,360 dependendo da especificação do seu cheque 60 00:04:02,360 --> 00:04:06,530 para a validade ou o estado inválido desse campo específico. 61 00:04:06,530 --> 00:04:11,990 Assim, por exemplo, você pode verificar se você declarou um campo como obrigatório, 62 00:04:11,990 --> 00:04:14,930 isso significa que você esperava que o usuário 63 00:04:14,930 --> 00:04:18,790 digite pelo menos algumas informações no campo. 64 00:04:18,790 --> 00:04:24,280 A ausência de informações dentro do campo em seu formulário significa que o campo é inválido. 65 00:04:24,280 --> 00:04:28,670 Da mesma forma, você pode especificar o continente ou o comprimento máximo de um valor de campo, 66 00:04:28,670 --> 00:04:31,970 para que você possa facilmente verificar se o número de caracteres 67 00:04:31,970 --> 00:04:35,500 dentro de um campo é aproximadamente o comprimento principal, 68 00:04:35,500 --> 00:04:37,660 ou abaixo do comprimento máximo, e assim por diante. 69 00:04:37,660 --> 00:04:39,380 No exercício que se segue, 70 00:04:39,380 --> 00:04:42,740 aplicaremos essas várias abordagens de validação de formulário para 71 00:04:42,740 --> 00:04:47,080 nossa forma orientada por modelo que projetamos no exercício anterior. 72 00:04:47,080 --> 00:04:51,564 Como exemplo, em seu formulário, 73 00:04:51,564 --> 00:04:54,170 você pode desativar o botão enviar verificando para 74 00:04:54,170 --> 00:04:56,770 ver se esse formulário está no estado válido ou não. 75 00:04:56,770 --> 00:05:00,650 Então, neste caso, você associará o 76 00:05:00,650 --> 00:05:05,875 desabilitado e definirá igual ao formulário de log.form.invalid, 77 00:05:05,875 --> 00:05:07,970 significa que quando o formulário é inválido, 78 00:05:07,970 --> 00:05:10,480 este botão será desativado neste caso. 79 00:05:10,480 --> 00:05:15,910 Assim, o usuário não terá permissão para enviar as informações através deste formulário específico. 80 00:05:15,910 --> 00:05:18,995 Então, esta é uma maneira de garantir que 81 00:05:18,995 --> 00:05:22,700 entradas incorretas não serão enviadas pelo usuário através do formulário. 82 00:05:22,700 --> 00:05:25,100 Da mesma forma, para campos específicos, 83 00:05:25,100 --> 00:05:30,080 você pode verificar se o campo foi preenchido ou não. 84 00:05:30,080 --> 00:05:33,125 Então, se você especificar que um campo específico é obrigatório 85 00:05:33,125 --> 00:05:36,620 especificando o atributo obrigatório para o campo de entrada, 86 00:05:36,620 --> 00:05:39,320 então você pode verificar se há um erro de 87 00:05:39,320 --> 00:05:43,250 o tipo necessário gerado para o elemento de campo particular lá. 88 00:05:43,250 --> 00:05:45,020 Então, no seu código, por exemplo, 89 00:05:45,020 --> 00:05:47,390 você pode até especificar para informar o usuário sobre 90 00:05:47,390 --> 00:05:51,035 o fato de que um determinado campo está incorreto. 91 00:05:51,035 --> 00:05:56,885 Você usa o erro de mat-para significar isso. 92 00:05:56,885 --> 00:06:01,230 Então, a tag mat-error, que vem de, 93 00:06:01,230 --> 00:06:06,555 novamente, o suporte de formulário de material angular como você vê aqui, 94 00:06:06,555 --> 00:06:09,195 se o nGif for verdadeiro, 95 00:06:09,195 --> 00:06:15,560 então essa mensagem será exibida abaixo no campo de entrada lá, 96 00:06:15,560 --> 00:06:17,100 e semelhante ao campo de entrada, 97 00:06:17,100 --> 00:06:20,405 será marcado como vermelho na tela. 98 00:06:20,405 --> 00:06:25,085 Então, isso é algo que você vai estar verificando e 99 00:06:25,085 --> 00:06:30,000 garantindo e também entregando mensagens de erro para o usuário. 100 00:06:30,000 --> 00:06:31,740 No exercício que se segue, 101 00:06:31,740 --> 00:06:35,980 aplicaremos esta abordagem para verificar o nome de usuário e a senha. 102 00:06:35,980 --> 00:06:40,700 Vamos especificar que esses campos são obrigatórios e se o usuário 103 00:06:40,700 --> 00:06:45,565 não digitar nenhuma informação nesses campos após o campo ter sido tocado, 104 00:06:45,565 --> 00:06:51,210 então vamos garantir que a mensagem de erro apropriada é exibida para o usuário. 105 00:06:51,210 --> 00:06:57,469 Então, com esta rápida compreensão de validação de formulário em Angular, 106 00:06:57,469 --> 00:06:58,970 vamos passar para o exercício, 107 00:06:58,970 --> 00:07:03,410 onde vamos verificar como podemos fazer validação de formulário simples para 108 00:07:03,410 --> 00:07:08,160 nosso formulário de login e, em seguida, ser capaz de exibir mensagens de erro. 109 00:07:08,160 --> 00:07:12,470 Voltaremos novamente à validação de formulários em um dos exercícios posteriores, 110 00:07:12,470 --> 00:07:19,660 depois de termos aprendido mais sobre o suporte reativo em Angular.