1
00:00:00,000 --> 00:00:04,735
[MÚSICA]

2
00:00:04,735 --> 00:00:09,734
Agora que tivemos uma rápida introdução à validação de forma reativa em

3
00:00:09,734 --> 00:00:14,901
a palestra anterior, vamos prosseguir para o próximo exercício onde poderíamos

4
00:00:14,901 --> 00:00:20,926
aplicar validação de formulário para a forma reativa que criamos no exercício anterior.

5
00:00:20,926 --> 00:00:26,101
Então, indo para o nosso componente de contato arquivo typescript,

6
00:00:26,101 --> 00:00:34,463
vamos adicionar os validadores de formulário para cada uma dessas propriedades dentro do nosso modelo de formulário.

7
00:00:34,463 --> 00:00:42,264
Então, para o primeiro nome, eu diria dentro da matriz, Validadores.

8
00:00:45,794 --> 00:00:50,830
Obrigatório, Da mesma forma eu vou

9
00:00:50,830 --> 00:00:55,977
aplicar o mesmo para o, sobrenome.

10
00:00:58,032 --> 00:01:02,361
Então e-mail, e também para o telnum, então para

11
00:01:02,361 --> 00:01:09,030
o telnum eu diria para os três restantes eu posso deixá-los abertos,

12
00:01:09,030 --> 00:01:16,066
porque eu concordo com ser falso ou verdadeiro e dar-lhes outros valores.

13
00:01:16,066 --> 00:01:21,117
Porque é uma ligeira alternância e contacttype pode levar apenas um

14
00:01:21,117 --> 00:01:26,166
dos três valores e valor padrão já é dado lá,

15
00:01:26,166 --> 00:01:30,470
e para mensagem, podemos torná-lo não um valor necessário.

16
00:01:30,470 --> 00:01:32,595
Se o usuário não quiser digitar comentários,

17
00:01:32,595 --> 00:01:36,030
você pode permitir que eles não digitem comentários, mas se você quiser,

18
00:01:36,030 --> 00:01:39,619
você pode adicionar os validators.Required mesmo para mensagem.

19
00:01:39,619 --> 00:01:46,890
Além disso, quando você redefinir o formulário no método onSubmit aqui

20
00:01:46,890 --> 00:01:52,910
você também pode redefinir o formulário para seu valor inicial, como especificamos

21
00:01:52,910 --> 00:01:57,630
no método onde criamos o formulário.

22
00:01:57,630 --> 00:02:05,100
Assim, dentro do valor de reset, ele leva um objeto como um parâmetro aqui.

23
00:02:05,100 --> 00:02:10,479
Este objeto será usado pelo método reset, fazendo

24
00:02:10,479 --> 00:02:17,447
uso do método set value que vimos na palestra anteriormente para redefinir

25
00:02:17,447 --> 00:02:24,192
o formulário para a condição como era quando ele foi originalmente criado.

26
00:02:24,192 --> 00:02:28,467
Então, aqui podemos fornecer

27
00:02:28,467 --> 00:02:35,442
parâmetros como firstname: '',

28
00:02:35,442 --> 00:02:41,745
lastname: '', telnum: 0,

29
00:02:43,660 --> 00:02:47,219
Em seguida, email: '',

30
00:02:49,160 --> 00:02:53,690
concordo: false,

31
00:02:53,690 --> 00:03:01,132
contacttype: 'Nenhum',

32
00:03:01,132 --> 00:03:07,940
message: '' '});.

33
00:03:07,940 --> 00:03:11,206
Então esses valores que fornecemos neste objeto JavaScript

34
00:03:14,042 --> 00:03:19,081
que nos damos o parâmetro para o método reset

35
00:03:19,081 --> 00:03:23,514
terá exatamente os mesmos valores que vimos para

36
00:03:23,514 --> 00:03:28,168
essas propriedades quando criamos esse formulário de feedback.

37
00:03:28,168 --> 00:03:32,325
Também precisamos redefinir o formulário completamente no modelo.

38
00:03:32,325 --> 00:03:36,532
Então, para fazer isso, para voltar para a importação aqui, e

39
00:03:36,532 --> 00:03:43,130
então nós também vamos importar o ViewChild} de '@angular /core';.

40
00:03:43,130 --> 00:03:45,950
Isso nos permitirá obter acesso a

41
00:03:45,950 --> 00:03:49,910
qualquer um dos elementos dom infantil dentro do meu modelo.

42
00:03:49,910 --> 00:03:54,054
Então, depois de fazer isso, entrando no código,

43
00:03:54,054 --> 00:03:59,321
aqui no ContactComponent, eu posso dizer @ViewChild,

44
00:03:59,321 --> 00:04:04,250
e então eu serei capaz de me referir ao FeedbackForm por

45
00:04:04,250 --> 00:04:09,088
dando-lhe uma variável de modelo com o nome fform.

46
00:04:09,088 --> 00:04:14,698
Você vai fazer isso na próxima etapa, e então para isso,

47
00:04:14,698 --> 00:04:19,770
Vou me referir a isso usando FeedbackFormDirective.

48
00:04:21,890 --> 00:04:27,030
Então, isso nos permite obter acesso ao formulário de modelo e, em seguida, redefinir completamente

49
00:04:27,030 --> 00:04:34,200
, de modo que o próprio formulário é redefinido de volta ao seu valor intocada.

50
00:04:34,200 --> 00:04:38,710
Então, este é outro passo adicional que precisamos fazer para garantir que o formulário é

51
00:04:38,710 --> 00:04:43,470
completamente redefinido para seu valor inicial aqui.

52
00:04:43,470 --> 00:04:50,268
Agora, tendo feito isso no método onSubject, depois de redefinir o FeedbackForm

53
00:04:53,241 --> 00:04:58,669
Object em si aqui, também precisamos adicionar

54
00:04:58,669 --> 00:05:06,242
em this.FeedbackFormDirective.resetForm ();

55
00:05:08,355 --> 00:05:10,060
Lá.

56
00:05:10,060 --> 00:05:15,045
Então isso garantirá que meu FeedBackForm seja completamente redefinido para seu valor de

57
00:05:15,045 --> 00:05:18,400
primitivo neste momento.

58
00:05:18,400 --> 00:05:23,273
Então, depois dessas mudanças vamos agora para o nosso arquivo template

59
00:05:23,273 --> 00:05:29,050
para mostrar como podemos refletir esses erros

60
00:05:29,050 --> 00:05:33,630
em nosso modelo para nosso formulário lá.

61
00:05:33,630 --> 00:05:35,730
Então, alternando para o arquivo de modelo.

62
00:05:35,730 --> 00:05:39,490
Então, primeiro, vamos para o botão aqui, e

63
00:05:39,490 --> 00:05:44,705
então vamos fazer o botão Desativado.

64
00:05:46,924 --> 00:05:56,470
Se o “FeedbackForm for inválido”.

65
00:05:56,470 --> 00:06:01,280
Assim, o botão será ativado somente quando o FeedbackForm for válido.

66
00:06:01,280 --> 00:06:06,403
Movendo para esse formulário deixe-me adicionar em

67
00:06:06,403 --> 00:06:15,674
o <mat-error *ngif="feedbackform.get” get

68
00:06:18,727 --> 00:06:28,727
('firstname') .hasError ('required')

69
00:06:30,484 --> 00:06:31,577
&&

70
00:06:31,577 --> 00:06:40,875
feedbackForm.get ('firstname')

71
00:06:47,340 --> 00:06:54,588
.tocado”, e a mensagem é Primeiro nome é obrigatório.

72
00:06:56,040 --> 00:07:01,070
Então essa seria a mensagem que você atribui usando uma única linha com o oculto,

73
00:07:01,070 --> 00:07:02,370
com essa informação lá.

74
00:07:04,710 --> 00:07:11,009
Deixe-me aplicar a mesma coisa ao sobrenome, número de telefone

75
00:07:15,328 --> 00:07:20,007
e e-mail.

76
00:07:20,007 --> 00:07:25,736
Então eu vou apenas copiar, colar, e editá-los,

77
00:07:25,736 --> 00:07:32,226
para que você possa prosseguir com eles, e ('sobrenome').

78
00:07:36,243 --> 00:07:38,472
Sobrenome.

79
00:07:38,472 --> 00:07:39,714
Telnum.

80
00:07:39,714 --> 00:07:46,424
Então eu aplico isso a ('telnum').

81
00:07:50,395 --> 00:07:53,948
Novamente, a mesma idéia por trás disso e, em seguida, também para e-mail.

82
00:08:01,227 --> 00:08:01,970
('e-mail').

83
00:08:05,976 --> 00:08:10,561
Vamos adicionar a variável de modelo chamada fform ao formulário.

84
00:08:10,561 --> 00:08:16,460
Então eu digite #fform ="ngForm”.

85
00:08:16,460 --> 00:08:22,187
Indo para o nosso formulário no navegador, deixe-me digitar o primeiro nome,

86
00:08:22,187 --> 00:08:28,240
e você vê que mesmo se eu excluir o valor ainda permanecerá verde,

87
00:08:28,240 --> 00:08:31,501
porque usamos o tocado lá.

88
00:08:31,501 --> 00:08:36,522
Mas no momento em que eu me afaste dele, então você

89
00:08:36,522 --> 00:08:42,586
será capaz de ver que isso se torna uma cor vermelha.

90
00:08:42,586 --> 00:08:47,659
Assim, da mesma forma para o Sobrenome você verá que quando eu

91
00:08:47,659 --> 00:08:54,020
remover o valor Sobrenome, então isso é mostrado de forma semelhante.

92
00:08:54,020 --> 00:08:57,710
Deixe-me digitar o primeiro nome e o sobrenome, e para o e-mail também.

93
00:08:59,736 --> 00:09:07,411
O, Mesmo caso para o número de telefone também.

94
00:09:07,411 --> 00:09:12,287
Assim, você pode fazer validação de formulário em nosso aplicativo.

95
00:09:12,287 --> 00:09:16,943
Com isso, concluímos este exercício onde temos

96
00:09:16,943 --> 00:09:21,285
adicionado na validação de formulário ao nosso formulário reativo.

97
00:09:21,285 --> 00:09:26,493
Este é um bom momento para você fazer um commit git com a mensagem,

98
00:09:26,493 --> 00:09:28,750
reativo forma parte dois.

99
00:09:28,750 --> 00:09:34,925
[MÚSICA]