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

2
00:00:04,598 --> 00:00:10,170
Hora de passar para a terceira tarefa neste curso.

3
00:00:10,170 --> 00:00:13,410
Nesta tarefa, como você já deve ter esperado,

4
00:00:13,410 --> 00:00:17,190
nós estaremos olhando para formas angulares e observáveis.

5
00:00:17,190 --> 00:00:22,480
Isso é o que aprendemos i n este módulo particular do curso.

6
00:00:22,480 --> 00:00:28,600
Nesta atribuição, você estará projetando um formulário

7
00:00:28,600 --> 00:00:33,440
dentro da visualização de componentes de detalhes do prato que permitirá

8
00:00:33,440 --> 00:00:38,540
os usuários enviar seus comentários sobre um prato específico.

9
00:00:39,640 --> 00:00:45,504
Você estará usando formas reativas angulares para projetar o formulário e

10
00:00:45,504 --> 00:00:50,127
você estará usando as mudanças de valor observáveis na ordem

11
00:00:50,127 --> 00:00:53,623
para iniciar a validação de formulário,

12
00:00:53,623 --> 00:00:59,147
assim como fizemos no exercício que você acabou de completar e

13
00:00:59,147 --> 00:01:04,109
você usará um novo componente de material angular chamado

14
00:01:04,109 --> 00:01:07,747
Angular Componente do controle deslizante de material.

15
00:01:07,747 --> 00:01:13,987
O componente do controle deslizante será usado para inserir a classificação para

16
00:01:13,987 --> 00:01:19,050
o prato pela pessoa que enviar a contagem.

17
00:01:20,230 --> 00:01:24,620
Vejamos as três tarefas nesta atribuição com um pouco mais de detalhes.

18
00:01:26,410 --> 00:01:31,760
Então aqui, Eu estou mostrando seu primeiro prato do menu para

19
00:01:31,760 --> 00:01:38,510
para ilustrar para você as três tarefas que precisam ser concluídas nesta tarefa.

20
00:01:38,510 --> 00:01:43,238
Então, nesta atribuição, vamos criar um formulário em

21
00:01:43,238 --> 00:01:48,594
a seção de comentários do seu componente detalhe prato.

22
00:01:48,594 --> 00:01:51,579
O formulário contém dois campos aqui.

23
00:01:51,579 --> 00:01:55,122
O campo de nome e um campo de comentário.

24
00:01:55,122 --> 00:02:00,570
No campo Nome, o nome do autor para o comentário será inserido pelo usuário.

25
00:02:00,570 --> 00:02:04,406
Em seguida, no campo de comentário que é uma área de texto,

26
00:02:04,406 --> 00:02:10,037
você permitirá que o autor insira o comentário que deseja enviar.

27
00:02:10,037 --> 00:02:14,639
Além disso, a fim de obter a classificação para o prato,

28
00:02:14,639 --> 00:02:22,010
vamos usar este componente de material angular chamado controle deslizante de material angular.

29
00:02:22,010 --> 00:02:23,730
Para este componente do controle deslizante,

30
00:02:25,040 --> 00:02:30,260
um link para a documentação é fornecido nos recursos adicionais.

31
00:02:30,260 --> 00:02:33,541
O componente do controle deslizante é bastante simples de criar.

32
00:02:33,541 --> 00:02:38,788
Para este componente do controle deslizante, você exibirá as marcas de verificação como esta.

33
00:02:38,788 --> 00:02:43,033
Então você pode ver que você tem um, dois, três, quatro marcas de ticks já e

34
00:02:43,033 --> 00:02:46,300
o quinto está bem abaixo deste polegar aqui.

35
00:02:46,300 --> 00:02:49,943
Assim, e também quando você mostrar a vista de polegar,

36
00:02:49,943 --> 00:02:54,346
ele irá mostrar o corte na classificação selecionada como o.

37
00:02:59,650 --> 00:03:06,047
Então, isso tem que ser rotulado no slide angular do componente que você incluir

38
00:03:06,047 --> 00:03:12,252
em sua fonte e isso permitirá que você selecione a classificação para o prato.

39
00:03:12,252 --> 00:03:15,820
Então, esta é a sua primeira tarefa nesta tarefa.

40
00:03:16,880 --> 00:03:22,530
Sua segunda tarefa é adicionar validação de formulário para este formulário.

41
00:03:22,530 --> 00:03:28,589
Agora este formulário deve ser criado usando fontes reativas angulares e

42
00:03:28,589 --> 00:03:34,200
também usando as alterações de valor observável, a fim de observar

43
00:03:34,200 --> 00:03:39,377
quaisquer alterações em qualquer um destes elementos de controle de formulário ela.

44
00:03:39,377 --> 00:03:44,226
E sempre que qualquer alteração ocorrer, você deve iniciar imediatamente a validação do formulário

45
00:03:44,226 --> 00:03:48,831
usando as alterações de valor observáveis exatamente como fizemos em

46
00:03:48,831 --> 00:03:52,730
o exercício que você acabou de completar na lição anterior.

47
00:03:54,650 --> 00:03:59,370
Agora, a validação que você precisa executar é que o nome e

48
00:03:59,370 --> 00:04:02,020
o comentário são campos obrigatórios.

49
00:04:02,020 --> 00:04:06,029
Além disso, o nome deve conter pelo menos dois caracteres.

50
00:04:06,029 --> 00:04:11,671
Então, se eu apenas digitar um caractere, então você deve mostrar uma mensagem aqui dizendo,

51
00:04:11,671 --> 00:04:15,283
Nome do Autor deve ter pelo menos dois caracteres.

52
00:04:15,283 --> 00:04:19,250
Agora, se é claro, nós digitamos mais, então isso vai desaparecer.

53
00:04:19,250 --> 00:04:23,494
Se você remover o nome completamente do campo,

54
00:04:23,494 --> 00:04:28,760
então você exibir uma mensagem dizendo: Nome do autor é obrigatório.

55
00:04:28,760 --> 00:04:31,985
Então, a mensagem necessária deve ser exibida aqui.

56
00:04:31,985 --> 00:04:35,327
Assim que eu digitar pelo menos dois caracteres,

57
00:04:35,327 --> 00:04:38,610
então a mensagem desaparecerá.

58
00:04:38,610 --> 00:04:42,051
Agora para o campo de comentário também, este é um campo obrigatório.

59
00:04:42,051 --> 00:04:46,029
Então, você precisa digitar pelo menos alguns caracteres.

60
00:04:46,029 --> 00:04:49,159
Não há restrição no número de caracteres.

61
00:04:49,159 --> 00:04:54,586
Mas se nenhum caractere for digitado quando você exibir a mensagem aqui dizendo,

62
00:04:54,586 --> 00:04:56,980
comente conforme necessário.

63
00:04:56,980 --> 00:05:02,966
Se seu formulário estiver inválido no momento, seu botão de envio não funcionará.

64
00:05:02,966 --> 00:05:08,006
Mas assim que seu formulário se tornar válido, seu botão de envio funcionará e

65
00:05:08,006 --> 00:05:10,707
deve permitir que você envie a fonte.

66
00:05:10,707 --> 00:05:15,160
Então, essa é a segunda tarefa em sua tarefa.

67
00:05:16,170 --> 00:05:23,060
A tarefa difícil em sua tarefa é que assim que o formulário tiver informações válidas,

68
00:05:23,060 --> 00:05:28,240
você deve exibir uma visualização do que você acabou de enviar no formulário.

69
00:05:28,240 --> 00:05:33,310
Deixe-me digitar algo mais significativo aqui, de modo que eles são

70
00:05:33,310 --> 00:05:38,460
visualização parece interessante.

71
00:05:38,460 --> 00:05:43,550
Então você vê que assim que você digitar informações válidas em seu formulário,

72
00:05:43,550 --> 00:05:48,440
você deve mostrar uma prévia do que o comentário será

73
00:05:48,440 --> 00:05:53,210
se ele for adicionado a essa lista de comentários para o prato.

74
00:05:53,210 --> 00:05:57,712
Agora observe que na pré-visualização, você ainda não tem a data exibida.

75
00:05:57,712 --> 00:06:01,046
Então, isso é outra coisa que você precisa ter em mente.

76
00:06:01,046 --> 00:06:08,027
Se o formulário se tornar inválido, a visualização desaparecerá.

77
00:06:08,027 --> 00:06:13,020
Mas assim que o formulário se tornar válido, a visualização reaparecerá.

78
00:06:13,020 --> 00:06:18,850
Então, isso é algo que você deve projetar adequadamente usando a lista ND e

79
00:06:18,850 --> 00:06:26,190
, em seguida, certificando-se de que o formulário é válido antes de exibir essas informações lá.

80
00:06:26,190 --> 00:06:27,044
Então, essa é a pré-visualização.

81
00:06:27,044 --> 00:06:30,676
Agora, quando o usuário clica no botão Enviar,

82
00:06:30,676 --> 00:06:34,370
então há algumas coisas que você precisa fazer.

83
00:06:34,370 --> 00:06:39,344
Quando o usuário clica no botão Enviar, então este comentário será

84
00:06:39,344 --> 00:06:44,589
adicionado à lista de comentários que você tem para este prato em particular.

85
00:06:44,589 --> 00:06:50,943
Então, deixe-me clicar no botão enviar e você notará imediatamente que o formulário

86
00:06:50,943 --> 00:06:56,490
foi adicionado à lista de comentários para este prato em particular.

87
00:06:56,490 --> 00:07:01,349
Então, você vê que o último comentário que eu acabei de inserir foi adicionado aqui.

88
00:07:01,349 --> 00:07:05,632
Observe também que a data para

89
00:07:05,632 --> 00:07:13,140
o formulário foi adicionada ao comentário aqui.

90
00:07:13,140 --> 00:07:18,612
Então você deve pegar os valores do modelo de formulário e

91
00:07:18,612 --> 00:07:24,084
, em seguida, copiá-lo para um modelo de dados, e então você empurra o comentário

92
00:07:24,084 --> 00:07:30,009
para o raio de objeto JavaScript de comentários para o objeto prato.

93
00:07:30,009 --> 00:07:34,553
Então, isso é algo que você precisa fazer usando o método de push array para

94
00:07:34,553 --> 00:07:36,960
array de objetos JavaScript.

95
00:07:36,960 --> 00:07:41,534
Além disso, a data deve ser configurada automaticamente e

96
00:07:41,534 --> 00:07:43,574
adicionado a esse modelo de dados.

97
00:07:43,574 --> 00:07:48,510
Lembre-se que o modelo de formulário não contém a data, mas

98
00:07:48,510 --> 00:07:54,800
o modelo de dados que é derivado da classe de comentário que projetamos,

99
00:07:54,800 --> 00:08:01,500
o modelo de dados contém o autor, a classificação, o comentário e a data.

100
00:08:01,500 --> 00:08:05,642
Então, você precisa adicionar a data no modelo de dados.

101
00:08:05,642 --> 00:08:11,261
Então, este é o lugar onde você vai fazer uso da classe de data Java Script

102
00:08:11,261 --> 00:08:16,370
juntamente com a conversão para uma string ISO

103
00:08:16,370 --> 00:08:24,060
antes de armazenar no campo de data do seu modelo de dados de comentário.

104
00:08:24,060 --> 00:08:29,164
Agora eu forneci links para exemplos de como você pode

105
00:08:29,164 --> 00:08:34,268
criar data e como você cab converter a data em uma string ISO

106
00:08:34,268 --> 00:08:39,148
na documentação para esta atribuição,

107
00:08:39,148 --> 00:08:44,158
e também nos recursos adicionais para este item.

108
00:08:44,158 --> 00:08:48,904
Então, por favor procure isso para entender como você deve

109
00:08:48,904 --> 00:08:52,530
adicionar a data ao campo de comentário lá.

110
00:08:52,530 --> 00:08:56,989
E uma vez que o comentário é empurrado para a matriz de comentários,

111
00:08:56,989 --> 00:09:02,176
então ele vai se juntar ao resto dos comentários para esse prato em particular.

112
00:09:02,176 --> 00:09:06,600
Você tem que lembrar que não estamos salvando isso no lado do servidor,

113
00:09:06,600 --> 00:09:09,129
porque não temos um lado do servidor.

114
00:09:09,129 --> 00:09:13,330
Então, se você recarregar sua página, esse comentário desaparecerá.

115
00:09:13,330 --> 00:09:15,040
Isso é perfeitamente aceitável.

116
00:09:15,040 --> 00:09:19,417
Nesta fase, não estamos tentando salvar as alterações para

117
00:09:19,417 --> 00:09:23,810
o prato de volta para o servidor através do nosso serviço de prato.

118
00:09:23,810 --> 00:09:27,542
Isso faremos em um dos ciclos posteriores.

119
00:09:27,542 --> 00:09:31,811
Então, neste momento, se você recarregar esta página, o comentário que você acabou de inserir vai

120
00:09:31,811 --> 00:09:35,240
desaparecer, mas isso é perfeitamente aceitável.

121
00:09:35,240 --> 00:09:38,670
Então, esta é a terceira tarefa em sua tarefa.

122
00:09:39,720 --> 00:09:45,197
Depois de concluir todas as três tarefas, certifique-se de que tudo funciona

123
00:09:45,197 --> 00:09:50,602
corretamente antes de enviar a solução de atribuição para o seu sistema.

124
00:09:50,602 --> 00:09:54,269
[MÚSICA]