1
00:00:03,170 --> 00:00:05,820
Agora que aprendemos sobre o suporte de validação de formulário orientado por modelo

2
00:00:05,820 --> 00:00:11,165
no Angular na palestra anterior,

3
00:00:11,165 --> 00:00:14,625
vamos aplicar o que aprendemos para

4
00:00:14,625 --> 00:00:18,330
o formulário de login que projetamos no exercício anterior.

5
00:00:18,330 --> 00:00:21,395
Faremos validação de formulário simples para o formulário de login.

6
00:00:21,395 --> 00:00:26,160
Em particular, vamos especificar o nome de usuário e senha conforme necessário,

7
00:00:26,160 --> 00:00:32,430
e, em seguida, verificar para garantir que o usuário digita informações nesses campos,

8
00:00:32,430 --> 00:00:37,125
e ser capaz de exibir mensagens de erro quando os campos estão vazios.

9
00:00:37,125 --> 00:00:46,180
Vamos prosseguir com esta modificação para o aplicativo neste exercício.

10
00:00:46,180 --> 00:00:49,215
Para começar neste exercício,

11
00:00:49,215 --> 00:00:53,600
vamos para o formulário de login aqui,

12
00:00:53,600 --> 00:00:57,090
que temos no modelo de componentes de login aqui.

13
00:00:57,090 --> 00:01:02,400
Nós já adicionamos no atributo novalidate ao formulário de login.

14
00:01:02,400 --> 00:01:10,780
Então, vamos adicionar na variável de modelo chamada LogInform para este modelo,

15
00:01:10,780 --> 00:01:18,835
e, em seguida, definir isso para ngForm como nós entendemos a partir da palestra anterior aqui.

16
00:01:18,835 --> 00:01:20,170
Então, fazendo isso,

17
00:01:20,170 --> 00:01:26,500
estamos especificando que essa variável de modelo nos permite rastrear o estado do formulário.

18
00:01:26,500 --> 00:01:31,330
Então, podemos até verificar o estado válido ou inválido para este formulário.

19
00:01:31,330 --> 00:01:34,485
Agora, além disso, para cada uma dessas entradas,

20
00:01:34,485 --> 00:01:43,620
também adicionaremos as variáveis de modelo correspondentes aqui.

21
00:01:43,620 --> 00:01:45,220
Então, deixe-me ir para a próxima linha aqui,

22
00:01:45,220 --> 00:01:52,670
e lá eu vou dizer nome de usuário é ngModel.

23
00:01:52,670 --> 00:01:58,360
Em seguida, também especificaremos isso conforme necessário aqui.

24
00:01:58,360 --> 00:02:00,660
Da mesma forma, para a senha,

25
00:02:00,660 --> 00:02:09,545
vamos adicionar na variável de modelo correspondente aqui como senha está em ngModel,

26
00:02:09,545 --> 00:02:15,700
e, em seguida, especificar isso conforme necessário aqui.

27
00:02:15,700 --> 00:02:19,700
Então, agora que especificamos as variáveis de modelo,

28
00:02:19,700 --> 00:02:23,870
podemos então realizar algumas das verificações de validação de formulário aqui.

29
00:02:23,870 --> 00:02:26,490
Agora, como estamos especificando isso como obrigatório,

30
00:02:26,490 --> 00:02:28,280
isso significa que se esses campos,

31
00:02:28,280 --> 00:02:30,455
os campos de entrada estiverem vazios,

32
00:02:30,455 --> 00:02:34,525
então o erro necessário será sinalizado para isso.

33
00:02:34,525 --> 00:02:40,105
Da mesma forma, agora que temos a variável de modelo para o formulário,

34
00:02:40,105 --> 00:02:47,380
podemos facilmente usar isso para verificar e desativar o botão Enviar abaixo aqui.

35
00:02:47,380 --> 00:02:49,255
Então, para o botão Enviar,

36
00:02:49,255 --> 00:02:53,270
o que fazemos aqui é usar

37
00:02:53,270 --> 00:03:01,080
o campo desabilitado aqui,

38
00:03:01,080 --> 00:03:03,500
e, em seguida, vamos definir o campo desabilitado

39
00:03:03,500 --> 00:03:12,270
para Loginform.Form.invalid.

40
00:03:12,270 --> 00:03:14,030
Então, ao fazer isso,

41
00:03:14,030 --> 00:03:18,030
estaremos desabilitando este botão quando o formulário for inválido.

42
00:03:18,030 --> 00:03:23,925
Assim, o usuário não pode sequer enviar o formulário quando o formulário contém entrada inválida.

43
00:03:23,925 --> 00:03:27,355
Assim, por exemplo, se o nome de usuário estiver vazio ou a senha estiver vazia,

44
00:03:27,355 --> 00:03:29,520
então o formulário de login será inválido,

45
00:03:29,520 --> 00:03:32,290
e assim o usuário não poderá enviar este formulário.

46
00:03:32,290 --> 00:03:36,950
Agora, esta é uma parte da validação de formulário que podemos fazer,

47
00:03:36,950 --> 00:03:40,385
através da qual podemos impedir que o formulário seja enviado.

48
00:03:40,385 --> 00:03:43,285
Além disso, para cada um desses campos,

49
00:03:43,285 --> 00:03:47,945
podemos até exibir uma mensagem de erro para

50
00:03:47,945 --> 00:03:53,875
indicar que tipo de erro está ocorrendo neste campo específico.

51
00:03:53,875 --> 00:03:55,309
Então, para fazer isso,

52
00:03:55,309 --> 00:03:58,230
para cada um desses elementos de campo de formulário,

53
00:03:58,230 --> 00:04:07,650
vamos adicionar na tag mat-error lá,

54
00:04:07,650 --> 00:04:12,270
e então vamos dizer parar nGiF,

55
00:04:12,270 --> 00:04:18,345
e vamos dizer username.errors.

56
00:04:18,345 --> 00:04:23,920
Então, observe que já demos a este modelo uma variável chamada nome de usuário,

57
00:04:23,920 --> 00:04:28,665
para que possamos usar em username.errors se houver erros e

58
00:04:28,665 --> 00:04:34,930
se esse tipo de erro for necessário.

59
00:04:34,930 --> 00:04:41,810
Então, se o erro é um tipo necessário de erro que é causa lá,

60
00:04:41,810 --> 00:04:44,060
então, nesse ponto,

61
00:04:44,060 --> 00:04:54,140
podemos especificar que o erro correspondente a ser exibido é o nome de usuário é necessário.

62
00:04:54,140 --> 00:04:59,305
Então, esse é o erro que vai ser exibido para este campo aqui.

63
00:04:59,305 --> 00:05:03,810
Da mesma forma, deixe-me adicionar o mesmo tipo de coisa para o campo de senha aqui.

64
00:05:03,810 --> 00:05:06,610
Então, deixe-me copiar isso e, em seguida, colá-lo aqui,

65
00:05:06,610 --> 00:05:09,110
e, em seguida, vamos dizer senha.errors.

66
00:05:09,110 --> 00:05:17,395
Em seguida, a mensagem será a senha é necessária.

67
00:05:17,395 --> 00:05:19,070
Então, adicionando isso,

68
00:05:19,070 --> 00:05:22,535
estaremos exibindo mensagens de erro abaixo

69
00:05:22,535 --> 00:05:27,665
esses campos quando o campo não contém nenhuma informação.

70
00:05:27,665 --> 00:05:29,950
Correção menor aqui.

71
00:05:29,950 --> 00:05:34,820
Isso deve ser nome de usuário?errors.required aqui,

72
00:05:34,820 --> 00:05:38,470
e da mesma forma, este também deve ser.required aqui.

73
00:05:38,470 --> 00:05:40,375
Então, com essas modificações,

74
00:05:40,375 --> 00:05:43,280
meu componente de login agora está pronto

75
00:05:43,280 --> 00:05:47,275
para fazer a validação do formulário e, em seguida, exibir mensagens de erro.

76
00:05:47,275 --> 00:05:52,505
Então, vamos salvar as alterações e, em seguida, ir e dar uma olhada no aplicativo atualizado.

77
00:05:52,505 --> 00:05:55,705
Indo para o nosso aplicativo no navegador,

78
00:05:55,705 --> 00:05:58,475
vamos abrir o formulário de login aqui.

79
00:05:58,475 --> 00:06:01,720
Então, você pode ver que agora tanto o nome de usuário quanto a senha carregam

80
00:06:01,720 --> 00:06:05,355
uma estrela lá para indicar que ambos são necessários.

81
00:06:05,355 --> 00:06:07,550
Então, deixe-me digitar.

82
00:06:09,870 --> 00:06:16,130
Então, aqui, você vê que o formulário é válido porque ele contém informações,

83
00:06:16,130 --> 00:06:20,375
e assim o botão Login será ativado.

84
00:06:20,375 --> 00:06:24,840
Deixe-me remover as informações do campo de senha,

85
00:06:24,840 --> 00:06:27,950
e, em seguida, você percebe imediatamente que

86
00:06:27,950 --> 00:06:32,405
o erro é indicado aqui dizendo que a senha é necessária.

87
00:06:32,405 --> 00:06:37,040
Observe também que o botão Login não será mais ativado.

88
00:06:37,040 --> 00:06:40,760
Será desativado. Então, você não poderá enviar o formulário aqui.

89
00:06:40,760 --> 00:06:43,960
Mas no momento em que eu preencha algo na senha,

90
00:06:43,960 --> 00:06:47,060
então o botão Login será ativado,

91
00:06:47,060 --> 00:06:49,670
e poderemos enviar o formulário aqui.

92
00:06:49,670 --> 00:06:51,390
Da mesma forma para o nome de usuário.

93
00:06:51,390 --> 00:06:55,045
Se eu remover as informações de nome de usuário lá,

94
00:06:55,045 --> 00:06:58,115
então você verá o erro sendo exibido aqui,

95
00:06:58,115 --> 00:07:04,670
e também você verá que o botão Login não está habilitado neste ponto.

96
00:07:04,670 --> 00:07:10,270
Então, é assim que a validação do formulário pode ser realizada neste caso.

97
00:07:10,270 --> 00:07:12,170
Então, como você já viu,

98
00:07:12,170 --> 00:07:15,960
adicionando na validação de forma simples ao nosso aplicativo,

99
00:07:15,960 --> 00:07:18,515
podemos verificar para garantir que

100
00:07:18,515 --> 00:07:22,925
os campos contêm as informações que eles devem conter,

101
00:07:22,925 --> 00:07:24,725
e no formato certo.

102
00:07:24,725 --> 00:07:30,290
Vamos examinar um pouco mais de que forma validação em um dos exercícios posteriores,

103
00:07:30,290 --> 00:07:33,020
especialmente para formas reativas.

104
00:07:33,020 --> 00:07:35,945
Com isso, completamos este exercício.

105
00:07:35,945 --> 00:07:38,840
Este é um bom momento para você fazer um git commit

106
00:07:38,840 --> 00:07:43,080
com os formulários orientados por modelo de mensagem, parte dois.