1
00:00:03,550 --> 00:00:08,265
Com uma breve compreensão das Formas Reativas Angulares,

2
00:00:08,265 --> 00:00:10,670
vamos prosseguir para o próximo exercício.

3
00:00:10,670 --> 00:00:12,800
Neste exercício, vamos construir

4
00:00:12,800 --> 00:00:18,705
uma Forma Reativa Angular na aplicação Angular que temos trabalhado até agora.

5
00:00:18,705 --> 00:00:25,480
Ao longo do caminho, consolidaremos nossa compreensão das Formas Reativas Angulares.

6
00:00:25,480 --> 00:00:28,435
Para começar o exercício,

7
00:00:28,435 --> 00:00:31,560
o primeiro passo que precisamos fazer é importar

8
00:00:31,560 --> 00:00:35,860
o módulo de Formulários Reativos Angulares para nosso módulo de aplicativo.

9
00:00:35,860 --> 00:00:38,020
Então, vamos para o módulo do aplicativo,

10
00:00:38,020 --> 00:00:42,160
e então vemos que já tínhamos importado o módulo de formulários anteriormente.

11
00:00:42,160 --> 00:00:46,540
Também importaremos o módulo Angular Reactive Forms.

12
00:00:46,540 --> 00:00:49,145
Então, eu vou copiar isso, colar isso aqui,

13
00:00:49,145 --> 00:00:53,810
e depois mudar isso para o módulo Angular Reactive Forms.

14
00:00:53,810 --> 00:00:57,770
Depois de fazermos isso, também precisamos incluir isso em nosso decorador.

15
00:00:57,770 --> 00:01:00,440
Então, indo para o decorador aqui,

16
00:01:00,440 --> 00:01:05,235
Eu vou importar o módulo de formulários reativos no decorador.

17
00:01:05,235 --> 00:01:09,365
Dois outros módulos que precisamos importar para

18
00:01:09,365 --> 00:01:14,245
nosso formulário é o MatSelectModule e o MatSlideTogGleModule.

19
00:01:14,245 --> 00:01:19,035
O módulo select nos permite usar o elemento select,

20
00:01:19,035 --> 00:01:24,360
e o slideToggle nos permite usar o slide alternar em nosso formulário.

21
00:01:24,360 --> 00:01:26,750
Então, para fazer isso, vamos digitar

22
00:01:26,750 --> 00:01:35,670
importar MatSelectModule de angular/material/selecionar,

23
00:01:36,890 --> 00:01:45,220
e importar MatslideTogGlemodule de angular/material/slide-alternância,

24
00:01:47,110 --> 00:01:55,195
e então precisamos adicioná-los ao nosso decorador NGModel nas importações.

25
00:01:55,195 --> 00:01:57,145
Então, indo para lá,

26
00:01:57,145 --> 00:02:02,840
deixe-me importar o MatSelectModule e MatslideTogGleModule lá.

27
00:02:02,840 --> 00:02:04,685
Então, com essas mudanças,

28
00:02:04,685 --> 00:02:08,240
nosso módulo de aplicativo agora está pronto para nos permitir a

29
00:02:08,240 --> 00:02:13,465
usar o módulo Formulários reativos em nossa aplicação.

30
00:02:13,465 --> 00:02:14,920
Na próxima etapa,

31
00:02:14,920 --> 00:02:22,105
o que eu vou fazer é criar uma classe aqui chamada como Feedback.

32
00:02:22,105 --> 00:02:28,265
Então, vou criá-lo na pasta compartilhada no arquivo feedback.ts.

33
00:02:28,265 --> 00:02:34,790
Agora, esta é a estrutura da classe que representa

34
00:02:34,790 --> 00:02:38,210
o modelo de dados correspondente ao modelo de formulário que vamos para

35
00:02:38,210 --> 00:02:41,840
usar dentro da nossa aplicação Angular.

36
00:02:41,840 --> 00:02:50,620
Então, eu crio a classe chamada feedback.

37
00:02:51,210 --> 00:02:53,500
Dentro da classe Feedback,

38
00:02:53,500 --> 00:02:57,160
Eu vou incluir algumas propriedades;

39
00:02:57,970 --> 00:03:02,830
primeiro nome, sobrenome,

40
00:03:02,830 --> 00:03:10,730
então número de telefone, Telnum, e-mail,

41
00:03:10,730 --> 00:03:20,440
então eu concordo que é uma variável booleana,

42
00:03:20,440 --> 00:03:28,385
propriedade booleana, contacttype que é do tipo string.

43
00:03:28,385 --> 00:03:31,730
Ficará mais claro para você por que eu incluo todos

44
00:03:31,730 --> 00:03:36,145
estes quando olharmos para o design do formulário em si.

45
00:03:36,145 --> 00:03:42,350
Esta classe de feedback em particular corresponde ao feedback que

46
00:03:42,350 --> 00:03:48,045
um usuário pode enviar sobre o nosso restaurante dentro da nossa aplicação Angular.

47
00:03:48,045 --> 00:03:51,800
Então, essa é a razão pela qual eu crio esta classe Feedback.

48
00:03:51,800 --> 00:03:55,865
Nós vamos mapear isso para o modelo de formulário em

49
00:03:55,865 --> 00:04:00,650
um dos componentes lá e também junto com isso,

50
00:04:00,650 --> 00:04:05,920
Eu vou exportar uma constante que é uma matriz de string chamada

51
00:04:05,920 --> 00:04:12,380
contacttype que como eu

52
00:04:12,380 --> 00:04:19,410
mencionado é uma matriz de string contendo três strings aqui,

53
00:04:25,060 --> 00:04:29,460
none, Tel, e e-mail.

54
00:04:29,750 --> 00:04:34,875
Então, agora nossa estrutura de modelo de dados está pronta.

55
00:04:34,875 --> 00:04:39,019
Então, mais tarde, quando desenvolvermos nosso lado do servidor,

56
00:04:39,019 --> 00:04:45,555
poderemos mapear isso em um dado que armazenamos no lado do servidor.

57
00:04:45,555 --> 00:04:47,690
Então, dentro do nosso aplicativo Angular,

58
00:04:47,690 --> 00:04:53,705
isso forma o modelo de dados que vamos usar para nosso aplicativo assim como o prato,

59
00:04:53,705 --> 00:04:58,850
o líder, e a promoção que desenvolvemos é outra classe que

60
00:04:58,850 --> 00:05:04,375
nos permite agrupar um conjunto de propriedades em uma classe aqui.

61
00:05:04,375 --> 00:05:06,380
Então, uma vez que tenhamos concluído isso,

62
00:05:06,380 --> 00:05:10,365
vamos prosseguir com a criação do formulário reativo.

63
00:05:10,365 --> 00:05:16,095
Vamos criar o formulário reativo em nosso componente de contato.

64
00:05:16,095 --> 00:05:20,780
Então, vamos para o arquivo component.ts contato,

65
00:05:20,780 --> 00:05:22,520
e também vamos incluir

66
00:05:22,520 --> 00:05:26,400
o formulário correspondente no arquivo de modelo de componentes de contato.

67
00:05:26,400 --> 00:05:29,475
Então, nos componentes de contato digite arquivo de script,

68
00:05:29,475 --> 00:05:32,135
então é aqui que vamos preparar nosso formulário

69
00:05:32,135 --> 00:05:35,555
como vimos o formulário reativo é construído principalmente

70
00:05:35,555 --> 00:05:43,265
no código e, em seguida, mapeado para os elementos de formulário no arquivo de modelo.

71
00:05:43,265 --> 00:05:49,360
Então, aqui eu vou importar algumas classes.

72
00:05:49,360 --> 00:05:52,655
Importarei o FormBuilder,

73
00:05:52,655 --> 00:06:00,055
depois o FormBuilder e os validadores.

74
00:06:00,055 --> 00:06:05,890
Validadores seriam usados para validação de formulário que será no próximo exercício,

75
00:06:05,890 --> 00:06:10,125
mas eu os importarei no momento.

76
00:06:10,125 --> 00:06:15,735
Estes são importados da biblioteca de formulários angulares.

77
00:06:15,735 --> 00:06:19,300
Então, uma vez que importamos isso,

78
00:06:19,300 --> 00:06:29,790
vamos importar a classe Feedback e a constante contacttype

79
00:06:29,790 --> 00:06:38,360
do arquivo compartilhado/feedback

80
00:06:38,360 --> 00:06:41,415
que acabamos de criar na etapa anterior.

81
00:06:41,415 --> 00:06:44,850
Precisamos disso dentro da nossa aplicação.

82
00:06:44,850 --> 00:06:49,455
Agora, dentro da minha classe aqui,

83
00:06:49,455 --> 00:07:00,310
Eu vou declarar algumas variáveis chamadas FeedbackForm que é do tipo FormGroup.

84
00:07:00,410 --> 00:07:07,475
Este é o modelo de formulário que vai hospedar

85
00:07:07,475 --> 00:07:11,960
o formulário reativo aqui e, em seguida, eu também vou

86
00:07:11,960 --> 00:07:17,270
declarar um feedback variável do tipo Feedback,

87
00:07:17,270 --> 00:07:19,745
então este seria o modelo de dados correspondente.

88
00:07:19,745 --> 00:07:27,930
Mais tarde, este valor Feedback pode ser obtido a partir de um servidor dentro da nossa aplicação,

89
00:07:27,930 --> 00:07:34,205
e, em seguida, também vou declarar o contacttype como uma variável

90
00:07:34,205 --> 00:07:41,045
que é da matriz string contacttype.

91
00:07:41,045 --> 00:07:44,860
Porque eu preciso fazer uso disso dentro da nossa aplicação.

92
00:07:44,860 --> 00:07:48,675
Para construir a forma reativa dentro do construtor,

93
00:07:48,675 --> 00:07:58,605
Eu injetaria o FormBuilder no construtor aqui,

94
00:07:58,605 --> 00:08:03,605
e criaria um método separado chamado

95
00:08:03,605 --> 00:08:08,950
CreateForm que invocarei dentro do construtor,

96
00:08:08,950 --> 00:08:12,300
assim, quando esta classe for construída, o formulário será criado.

97
00:08:12,300 --> 00:08:17,870
Então, o CreateForm será um método dentro do qual criarei o formulário real.

98
00:08:17,870 --> 00:08:24,060
Então, deixe-me adicionar no método CreateForm aqui.

99
00:08:24,060 --> 00:08:27,590
Esta é apenas conveniência Eu poderia simplesmente ter

100
00:08:27,590 --> 00:08:31,250
incluído o código diretamente no próprio construtor,

101
00:08:31,250 --> 00:08:34,760
mas você vai ver que pode haver razões pelas quais você

102
00:08:34,760 --> 00:08:41,060
pode precisar chamar este CreateForm de outros locais.

103
00:08:41,060 --> 00:08:47,240
Então, é melhor colocá-lo em um método separado aqui.

104
00:08:47,240 --> 00:08:50,830
Então, vou criar o formulário aqui, Formulário reativo,

105
00:08:50,830 --> 00:08:56,775
e, em seguida, colocá-lo na variável FeedbackForm que eu declarei anteriormente.

106
00:08:56,775 --> 00:08:58,335
Então, para criar o formulário,

107
00:08:58,335 --> 00:09:02,215
Eu vou ter a ajuda do FormBuilder,

108
00:09:02,215 --> 00:09:05,145
o FB que eu declarei no construtor,

109
00:09:05,145 --> 00:09:10,760
e, em seguida, o FB fornece um método chamado Grupo que me permite

110
00:09:10,760 --> 00:09:16,910
definir um grupo, um FormGroup aqui.

111
00:09:16,910 --> 00:09:23,040
Então, lá dentro, agora eu vou construir as partes da forma lá.

112
00:09:23,040 --> 00:09:24,845
Então, dentro deste grupo,

113
00:09:24,845 --> 00:09:28,775
agora eu posso incluir os vários controles de formulário lá.

114
00:09:28,775 --> 00:09:34,050
Então, eu colocaria primeiro o primeiro nome,

115
00:09:34,050 --> 00:09:44,200
depois o sobrenome.

116
00:09:45,910 --> 00:09:51,175
Observe como os campos dentro do meu formulário são

117
00:09:51,175 --> 00:09:56,460
espelhando de perto os campos dentro da minha classe de feedback.

118
00:09:56,460 --> 00:09:59,790
Eles não precisam corresponder exatamente, mas se eles coincidirem,

119
00:09:59,790 --> 00:10:01,630
então transferir os dados entre

120
00:10:01,630 --> 00:10:06,550
o modelo de dados e os quatro modelos torna-se muito mais simples.

121
00:10:06,550 --> 00:10:12,500
Telnum que eu vou deixar porque uh-

122
00:10:13,040 --> 00:10:15,800
Eu adicionei primeiro nome, sobrenome,

123
00:10:15,800 --> 00:10:25,140
Telnum, e-mail, e concordo, e tipo de contato,

124
00:10:25,550 --> 00:10:31,360
que eu vou definir como nenhum para começar.

125
00:10:31,360 --> 00:10:35,710
Lembre-se de que o tipo de contato é uma matriz de string contendo três deles

126
00:10:35,710 --> 00:10:40,015
, então você deve escolher um deles e, em seguida, mapeá-lo para esta propriedade aqui.

127
00:10:40,015 --> 00:10:44,920
Então, eu vou escolher isso como nenhum e depois mensagem,

128
00:10:44,920 --> 00:10:49,120
que será o feedback que o usuário dá sobre

129
00:10:49,120 --> 00:10:53,605
nosso restaurante mapeado em uma string aqui.

130
00:10:53,605 --> 00:10:59,765
Então, estes são os vários campos que farão parte do nosso formulário aqui.

131
00:10:59,765 --> 00:11:04,370
Assim, uma vez que temos a estrutura do formulário no lugar aqui,

132
00:11:04,370 --> 00:11:07,525
então você percebe que quando este método é chamado,

133
00:11:07,525 --> 00:11:12,455
esta forma será a forma reativa será criada no código aqui.

134
00:11:12,455 --> 00:11:16,595
Agora, precisamos mapear isso na exibição,

135
00:11:16,595 --> 00:11:17,900
no modelo lá.

136
00:11:17,900 --> 00:11:21,470
Então, vamos fazer isso na próxima etapa.

137
00:11:21,470 --> 00:11:26,130
Então, agora, indo para o nosso arquivo de modelo,

138
00:11:26,130 --> 00:11:31,415
no arquivo de modelo de componente de contato,

139
00:11:31,415 --> 00:11:36,159
vamos rolar para baixo e, em seguida, incluir isso em

140
00:11:36,159 --> 00:11:42,910
nosso arquivo de modelo logo após este div aqui,

141
00:11:42,910 --> 00:11:50,325
então temos essa div em nossa visão de contato que contém as informações de localização e assim por diante.

142
00:11:50,325 --> 00:11:54,510
Logo depois disso, eu vou criar outra div dentro

143
00:11:54,510 --> 00:11:59,820
que vamos hospedar a forma reativa lá.

144
00:11:59,820 --> 00:12:17,720
Deixe-me aplicar algumas coisas de layout flex

145
00:12:17,720 --> 00:12:19,100
aqui para a minha div.

146
00:12:19,100 --> 00:12:22,110
Agora, este tamanho de formulário como você pode ver deve ser

147
00:12:22,110 --> 00:12:25,905
uma classe CSS que eu vou criar um pouco mais tarde.

148
00:12:25,905 --> 00:12:31,540
Dentro deste div, eu vou hospedar meu formulário.

149
00:12:31,540 --> 00:12:36,680
Então, uma vez que eu colocar este div no meu arquivo template,

150
00:12:36,680 --> 00:12:40,180
agora deixe-me começar com um título para isso.

151
00:12:40,180 --> 00:12:47,675
Então, diremos: “Envie-nos seu feedback.”

152
00:12:47,675 --> 00:12:54,250
Então, você está buscando o feedback dos visitantes do seu site.

153
00:12:54,950 --> 00:12:58,050
Vamos começar a construir o formulário.

154
00:12:58,050 --> 00:13:03,200
Então, deixe-me começar com o formulário tag

155
00:13:03,200 --> 00:13:08,275
aqui e então vamos construir o formulário dentro desta tag formulário aqui.

156
00:13:08,275 --> 00:13:12,180
Então, para o formulário, a primeira coisa que vou fazer é aplicar

157
00:13:12,180 --> 00:13:16,535
o não validar porque a validação será cuidada por angular,

158
00:13:16,535 --> 00:13:21,380
e, em seguida, também aplicar um grupo de formulário aqui.

159
00:13:21,380 --> 00:13:38,060
Então, observe que este grupo de formulários é aquele que vai me amarrar ao modelo de formulário reativo

160
00:13:38,060 --> 00:13:40,555
que eu criei no meu código aqui.

161
00:13:40,555 --> 00:13:42,380
Então, fazendo isso,

162
00:13:42,380 --> 00:13:47,255
estamos amarrando nesta forma reativa no modelo para

163
00:13:47,255 --> 00:13:53,680
o modelo de formulário correspondente em nosso arquivo datilografado lá.

164
00:13:53,680 --> 00:13:59,100
Então, a maneira como fazemos isso é declaramos o grupo de formulário e formulário de feedback.

165
00:13:59,100 --> 00:14:00,910
Vou mostrar-lhe como você amarra em

166
00:14:00,910 --> 00:14:04,840
os restantes elementos de formulário para

167
00:14:04,840 --> 00:14:09,315
as propriedades correspondentes no modelo de formulário em pouco tempo.

168
00:14:09,315 --> 00:14:11,325
Então, depois de fazermos isso,

169
00:14:11,325 --> 00:14:20,480
vamos colocar em nossos elementos de formulário no lugar dentro deste modelo de formulário.

170
00:14:20,480 --> 00:14:24,490
Então, eu vou declarar um P por aqui e, em seguida, dentro lá eu

171
00:14:24,490 --> 00:14:28,860
vai usar o mat-form-field aqui,

172
00:14:28,860 --> 00:14:35,475
para o qual eu vou aplicar uma classe CSS chamada meia-largura,

173
00:14:35,475 --> 00:14:39,600
e fechar isso fora.

174
00:14:39,600 --> 00:14:45,195
Então, isso colocaria meu primeiro controle formulário no lugar aqui.

175
00:14:45,195 --> 00:14:55,930
Então, aqui, vou colocar a entrada e, em seguida, aplicar o matInput de material angular aqui.

176
00:14:56,930 --> 00:15:03,530
Para amarrar isso na propriedade dentro do meu modelo de formulário,

177
00:15:03,530 --> 00:15:08,630
Eu precisaria fazer FormControlName,

178
00:15:09,980 --> 00:15:14,650
e o primeiro é o primeiro nome.

179
00:15:14,650 --> 00:15:20,370
Então, dessa forma, essa entrada está agora vinculada à propriedade de nome

180
00:15:20,370 --> 00:15:26,015
que eu defini dentro do meu modelo de formulário que eu defini no código.

181
00:15:26,015 --> 00:15:29,680
O primeiro nome e, em seguida, vou definir

182
00:15:29,680 --> 00:15:37,900
o espaço reservado como primeiro nome.

183
00:15:37,900 --> 00:15:39,970
Então, como você esperaria,

184
00:15:39,970 --> 00:15:43,685
este campo de entrada vai ser usado para digitar

185
00:15:43,685 --> 00:15:51,215
o primeiro nome pelo usuário, digite texto.

186
00:15:51,215 --> 00:15:56,935
Curiosamente, você vê que nós não temos o ng-model aqui

187
00:15:56,935 --> 00:16:02,950
ou qualquer uma das variáveis de template e assim por diante na minha forma mais.

188
00:16:02,950 --> 00:16:05,945
Formulários reativos funcionam de forma diferente.

189
00:16:05,945 --> 00:16:08,480
Então, como você vê em formulários reativos,

190
00:16:08,480 --> 00:16:11,975
mapear o grupo de formulários e, em seguida, tentar os nomes de controle de formulário.

191
00:16:11,975 --> 00:16:16,095
Se você estiver criando controles de formulário com a classe de controle de formulário,

192
00:16:16,095 --> 00:16:20,440
você declararia isso como controle de formulário entre colchetes e, em seguida, combiná-lo

193
00:16:20,440 --> 00:16:24,910
com o controle de formulário correspondente que você cria no seu tipo cético.

194
00:16:24,910 --> 00:16:28,940
Mas agora como estamos usando o construtor de formulários,

195
00:16:28,940 --> 00:16:33,280
Eu só sou necessário para amarrar no grupo de formulários como

196
00:16:33,280 --> 00:16:38,605
isso na minha forma para o modelo de formulário correspondente,

197
00:16:38,605 --> 00:16:39,890
e depois o resto deles,

198
00:16:39,890 --> 00:16:42,690
eu declaro como nome de controle de formulário e, em seguida, combiná-los para

199
00:16:42,690 --> 00:16:45,085
as propriedades correspondentes em

200
00:16:45,085 --> 00:16:48,995
o controle de formulário modelo que eu tenho no meu datilografado a forma de código.

201
00:16:48,995 --> 00:16:53,950
Então, isso criará o primeiro campo de nome lá.

202
00:16:53,950 --> 00:16:56,400
Deixe-me copiar isso.

203
00:16:56,400 --> 00:17:00,150
Preciso de um sobrenome aqui.

204
00:17:00,150 --> 00:17:07,005
Então, eu vou copiar isso e, em seguida, dizer nome de controle de formulário é Sobrenome,

205
00:17:07,005 --> 00:17:10,510
eo espaço reservado é Sobrenome,

206
00:17:10,510 --> 00:17:12,550
e do tipo, Texto, aqui.

207
00:17:12,550 --> 00:17:18,975
Eu tinha primeiro nome,

208
00:17:18,975 --> 00:17:24,970
Eu tinha sobrenome e se você olhar para o modelo de controle de formulário,

209
00:17:24,970 --> 00:17:27,400
você verá que depois do primeiro nome e sobrenome,

210
00:17:27,400 --> 00:17:31,770
Eu tenho o número de telefone como o próximo,

211
00:17:31,770 --> 00:17:34,325
então eu vou colar isso aqui.

212
00:17:34,325 --> 00:17:38,390
Em seguida, o nome do controle de formulário aqui é Telnum,

213
00:17:38,390 --> 00:17:46,920
e o espaço reservado é Número de telefone,

214
00:17:46,920 --> 00:17:51,405
e o tipo é Tel.

215
00:17:51,405 --> 00:17:53,385
Enquanto estamos nisso,

216
00:17:53,385 --> 00:17:59,905
Vou amarrar o Necessário a estes, embora isso não seja realmente necessário.

217
00:17:59,905 --> 00:18:08,275
Mas deixe-me adicionar isso lá.

218
00:18:08,275 --> 00:18:11,920
Agora, número de telefone, então eu tenho e-mail.

219
00:18:11,920 --> 00:18:20,679
Então, o próximo campo é Email,

220
00:18:25,520 --> 00:18:32,100
e o espaço reservado é Email,

221
00:18:32,100 --> 00:18:35,510
e o tipo também é.

222
00:18:35,510 --> 00:18:38,600
Então, agora eu tenho primeiro,

223
00:18:38,600 --> 00:18:41,610
sobrenome, número de telefone e e-mail.

224
00:18:41,610 --> 00:18:52,820
A próxima coisa que vou adicionar é uma alternância de slide.

225
00:18:53,850 --> 00:18:56,600
Antes usamos a caixa de seleção.

226
00:18:56,600 --> 00:19:03,240
O slidetoggle é outro controle de forma que o material angular fornece,

227
00:19:03,240 --> 00:19:07,150
que é um pouco diferente olhando do que a caixa de seleção e

228
00:19:07,150 --> 00:19:11,480
Eu pensei que eu vou ilustrar com você usando isso no formulário aqui.

229
00:19:11,480 --> 00:19:18,680
Agora, é aqui que vou usar uma tabela para posicionar esses elementos.

230
00:19:19,890 --> 00:19:22,300
A razão é que,

231
00:19:22,300 --> 00:19:25,520
esses elementos são difíceis de posicionar sem usar uma tabela.

232
00:19:25,520 --> 00:19:27,605
Então, dentro da tabela,

233
00:19:27,605 --> 00:19:31,740
Eu tenho certeza que todos vocês sabem como usar a tabela,

234
00:19:35,280 --> 00:19:39,740
Eu tentei posicioná-los usando o layout flex padrão

235
00:19:39,740 --> 00:19:44,970
e não foi muito bem sucedido com isso.

236
00:19:44,970 --> 00:19:50,510
Então, em vez disso, eu recorri a usar uma tabela para posicionar esses dois itens no meu formulário.

237
00:19:50,510 --> 00:19:54,350
Então, mat-slide-alternar.

238
00:19:54,350 --> 00:19:57,680
Então, o slidetoggle é como a caixa de seleção,

239
00:19:57,680 --> 00:20:00,390
você pode ativá-lo e desativá-lo,

240
00:20:00,390 --> 00:20:04,550
e isso é permitido para selecionar um valor booleano aqui.

241
00:20:04,550 --> 00:20:14,200
Então, slidetoggle e FormControlName está concordando.

242
00:20:14,200 --> 00:20:16,140
Se você se lembra, tínhamos concordo,

243
00:20:16,140 --> 00:20:22,925
que era uma propriedade booleana no controle formulário.

244
00:20:22,925 --> 00:20:25,735
Então, para isso, eu diria,

245
00:20:25,735 --> 00:20:29,340
podemos entrar em contato com você?

246
00:20:29,340 --> 00:20:35,140
Agora, ficará mais claro para você quando você vir a versão final do

247
00:20:35,140 --> 00:20:43,060
neste formulário para entender por que estamos fazendo isso.

248
00:20:43,060 --> 00:20:49,895
Agora, vamos colocar todas as partes na minha forma reativa aqui.

249
00:20:49,895 --> 00:20:55,925
A segunda parte eu vou usar um seleto,

250
00:20:55,925 --> 00:21:03,920
que é suportado através do componente mat-select em material angular.

251
00:21:03,920 --> 00:21:12,460
Então, MD selecione e para isso o espaço reservado,

252
00:21:13,520 --> 00:21:21,690
Vou definir como “Como?”,

253
00:21:21,690 --> 00:21:27,580
e FormControlName com o qual eu vou amarrar este é

254
00:21:27,580 --> 00:21:37,650
“contacttype” e fechar o MD select.

255
00:21:37,650 --> 00:21:41,720
Então, isso me permite criar um elemento de seleção no meu formulário.

256
00:21:41,720 --> 00:21:44,660
Então, o elemento select é algo que me dá

257
00:21:44,660 --> 00:21:48,535
uma lista suspensa a partir da qual eu posso selecionar um deles.

258
00:21:48,535 --> 00:21:50,905
Então, para criar a lista pull-down,

259
00:21:50,905 --> 00:22:00,510
Eu vou usar a opção mat-que está disponível como um componente em material angular.

260
00:22:00,510 --> 00:22:05,035
Então, a opção mat-está incluída dentro do mat-select.

261
00:22:05,035 --> 00:22:06,810
Então, para a opção,

262
00:22:06,810 --> 00:22:09,570
Eu vou fazer *NGFor,

263
00:22:09,570 --> 00:22:17,070
e tenho certeza que você se lembra da diretiva NGFor de mais cedo,

264
00:22:17,070 --> 00:22:24,750
*NGFor “Let ctype of ContactType.”

265
00:22:24,750 --> 00:22:28,360
Agora, você vê por que eu declarei a variável de tipo de contato

266
00:22:28,360 --> 00:22:44,740
no meu código mais cedo e então eu diria, [value] = “ctype”.

267
00:22:44,740 --> 00:23:00,840
Então, estou configurando minha opção na minha seleção aqui e usando a interpolação,

268
00:23:00,840 --> 00:23:03,040
Vou digitar ctype aqui.

269
00:23:03,040 --> 00:23:10,100
Então, isso vai me dar um menu de opções pulldown no meu formulário lá.

270
00:23:10,100 --> 00:23:14,665
Então, essa é a próxima parte e, finalmente,

271
00:23:14,665 --> 00:23:21,270
depois da tabela, Eu vou colocar em uma área de texto aqui.

272
00:23:21,270 --> 00:23:31,320
Então, eu diria p e fechar esse P. Para estilizar a forma reativa,

273
00:23:31,320 --> 00:23:35,395
o elemento P me permite posicionar os itens corretamente.

274
00:23:35,395 --> 00:23:37,580
Então, é por isso que estou usando isso.

275
00:23:37,580 --> 00:23:42,380
Então, como você se lembra,

276
00:23:42,540 --> 00:23:48,740
mat-form-field me permite

277
00:23:48,740 --> 00:23:56,239
incluir um recipiente de entrada aqui e, em seguida, lá dentro, eu vou definir uma área de texto,

278
00:23:56,239 --> 00:24:00,310
que eu aplicar

279
00:24:00,310 --> 00:24:08,650
a diretiva matInput a isso.

280
00:24:08,650 --> 00:24:15,460
Em seguida, o FormControlName, vou dar como “mensagem”.

281
00:24:15,460 --> 00:24:23,290
Então, este elemento de formulário específico permite que o usuário digite

282
00:24:23,290 --> 00:24:31,305
na mensagem de feedback do meu restaurante.

283
00:24:31,305 --> 00:24:37,100
Então, espaço reservado “Seu feedback”,

284
00:24:37,100 --> 00:24:42,610
e, em seguida, eu vou dar a área de texto um tamanho de

285
00:24:42,610 --> 00:24:51,245
12 linhas aqui e, em seguida, fechar a área de texto.

286
00:24:51,245 --> 00:24:58,005
Então, aqui temos uma área de texto com as 12 linhas.

287
00:24:58,005 --> 00:25:03,350
Então, que completa a maior parte do formulário.

288
00:25:03,350 --> 00:25:07,910
Desculpe, isso deve estar fora da tabela.

289
00:25:08,070 --> 00:25:11,830
Precisamos de um botão para enviar o formulário.

290
00:25:11,830 --> 00:25:20,755
Então, ali mesmo, eu vou incluir um botão do tipo = “enviar” e

291
00:25:20,755 --> 00:25:24,155
este botão enviar eu vou aplicar

292
00:25:24,155 --> 00:25:32,270
o botão mat-e também aplicar o class="background-primary”.

293
00:25:33,600 --> 00:25:42,770
Você já me viu aplicando isso ao botão no exercício anterior também,

294
00:25:42,770 --> 00:25:45,740
tipo semelhante de botão.

295
00:25:45,740 --> 00:25:48,510
Então, agora meu formulário está quase pronto.

296
00:25:48,510 --> 00:25:54,455
Você poderia adicionar algumas classes CSS ao componente de contato.

297
00:25:54,455 --> 00:25:58,725
As três classes que eu usei é full-width,

298
00:25:58,725 --> 00:26:06,420
isso é usado para definir o tamanho dos elementos lá.

299
00:26:06,420 --> 00:26:10,980
Então, largura total 95 por cento, meia largura.

300
00:26:11,200 --> 00:26:17,565
Então, isso me permite dimensionar os elementos corretamente,

301
00:26:17,565 --> 00:26:23,930
45 por cento meia largura e, em seguida, o tamanho do formulário.

302
00:26:26,400 --> 00:26:32,740
Então, eu uso essas classes CSS no meu formulário.

303
00:26:32,740 --> 00:26:38,230
Então, com isso, vamos salvar as alterações,

304
00:26:38,460 --> 00:26:44,150
e dar uma olhada rápida no formulário em nosso aplicativo.

305
00:26:44,150 --> 00:26:45,915
Indo para o navegador,

306
00:26:45,915 --> 00:26:48,725
na vista de contato,

307
00:26:48,725 --> 00:26:54,210
ao rolar para baixo você agora vê o formulário no lugar na vista de contato aqui.

308
00:26:54,210 --> 00:26:57,660
Então, você vê o envie-nos seu feedback,

309
00:26:57,660 --> 00:27:01,985
o primeiro nome, o sobrenome, o número de telefone,

310
00:27:01,985 --> 00:27:06,695
o e-mail e o slide alternar aqui,

311
00:27:06,695 --> 00:27:12,395
para que você veja o slide alternar no lugar lá e então este é este seleto.

312
00:27:12,395 --> 00:27:15,650
A seleção me permite selecionar um desses três.

313
00:27:15,650 --> 00:27:20,415
O valor padrão é nenhum e, em seguida, a área de texto aqui,

314
00:27:20,415 --> 00:27:25,675
me permite digitar meus comentários de comentários aqui e, em seguida, o botão enviar.

315
00:27:25,675 --> 00:27:28,940
Então, isso completa o formulário reativo em

316
00:27:28,940 --> 00:27:32,690
minha inscrição, mas quando você clica no botão Enviar,

317
00:27:32,690 --> 00:27:35,000
você não será capaz de enviar este formulário.

318
00:27:35,000 --> 00:27:39,480
Então, precisamos adicionar o ngSubmit ao nosso formulário no template

319
00:27:39,480 --> 00:27:44,485
e, em seguida, adicionar um método em nosso arquivo de script de tipo.

320
00:27:44,485 --> 00:27:47,185
Indo para o nosso código,

321
00:27:47,185 --> 00:27:49,315
para o formulário aqui,

322
00:27:49,315 --> 00:27:53,830
junto com o formulário novalidate FormGroup,

323
00:27:53,830 --> 00:28:01,670
Eu vou adicionar em um ngSubmeter ao formulário.

324
00:28:02,730 --> 00:28:10,025
Vou chamar o método como método onSubmit.

325
00:28:10,025 --> 00:28:14,155
Então, com isso, meu formulário agora está pronto para enviar informações.

326
00:28:14,155 --> 00:28:17,195
Preciso ir para os componentes de contato, arquivo de script do tipo

327
00:28:17,195 --> 00:28:25,380
e, em seguida, criar o método onSubmit aqui.

328
00:28:25,380 --> 00:28:28,420
Então, no método onSubmit,

329
00:28:31,450 --> 00:28:37,030
acontece que o modelo de formulário é exatamente o mesmo que os modelos de dados,

330
00:28:37,030 --> 00:28:45,790
para que eu possa simplesmente tomar o valor do modelo de formulário.

331
00:28:45,790 --> 00:28:49,840
Então, quando você tem um modelo de formulário como este formulário de feedback,

332
00:28:49,840 --> 00:28:54,410
o formulário de feedback dá uma propriedade chamada value,

333
00:28:54,410 --> 00:29:00,020
que me permite recuperar o valor atual de todos estes do meu formulário de feedback.

334
00:29:00,020 --> 00:29:03,810
Então isso vai formar um objeto JavaScript,

335
00:29:03,810 --> 00:29:06,740
que eu posso então mapear para o objeto JavaScript feedback.

336
00:29:06,740 --> 00:29:10,170
Acontece que, ambos têm exatamente a mesma estrutura,

337
00:29:10,170 --> 00:29:11,690
o modelo de dados e o modelo de formulário.

338
00:29:11,690 --> 00:29:14,140
Então, é por isso que eu sou capaz de carregar rapidamente o valor

339
00:29:14,140 --> 00:29:18,120
diretamente no modelo de dados quando o usuário envia o formulário.

340
00:29:18,120 --> 00:29:21,120
Se o seu modelo de dados é um pouco diferente do modelo de formulário,

341
00:29:21,120 --> 00:29:24,460
você precisa mapear em propriedades individuais explicitamente e

342
00:29:24,460 --> 00:29:28,890
que pode ser feito dentro deste método lá.

343
00:29:29,610 --> 00:29:36,455
Só para mostrar que o formulário foi enviado corretamente,

344
00:29:36,455 --> 00:29:44,760
Vou registrar o valor no console, o console JavaScript.

345
00:29:44,760 --> 00:29:50,200
Então eu diria, this.FeedbackForm.reset.

346
00:29:51,320 --> 00:30:00,405
O método de redefinição permite que você redefina o formulário para seu estado normal,

347
00:30:00,405 --> 00:30:03,000
removendo todas as entradas que você fez no formulário.

348
00:30:03,000 --> 00:30:05,480
Assim, uma vez que o usuário envia,

349
00:30:05,480 --> 00:30:09,030
você normalmente capturaria os valores e, em seguida, redefiniria o formulário para

350
00:30:09,030 --> 00:30:14,365
que a entrada adicional pode ser feita como um formulário separado.

351
00:30:14,365 --> 00:30:17,450
Então esse é o método de reset que vamos usar aqui.

352
00:30:17,450 --> 00:30:19,265
Então, com essas mudanças,

353
00:30:19,265 --> 00:30:23,900
vamos salvar as mudanças e, em seguida, ir e ver nosso formulário em ação.

354
00:30:23,900 --> 00:30:30,080
Uma última coisinha que eu quero adicionar ao meu modelo é mostrar

355
00:30:30,080 --> 00:30:36,200
você os valores do formulário dentro do meu próprio formulário,

356
00:30:36,200 --> 00:30:38,230
embora em um aplicativo real,

357
00:30:38,230 --> 00:30:42,580
você não estaria fazendo isso, mas eu só queria ilustrar para você como

358
00:30:42,580 --> 00:30:47,165
você pode ver os valores do FeedbackForm diretamente aqui,

359
00:30:47,165 --> 00:30:49,095
do Modelo FeedbackForm.

360
00:30:49,095 --> 00:30:52,395
Então, eu posso fazer aqui dentro.

361
00:30:52,395 --> 00:31:02,625
Eu posso dizer FeedbackForm.value e canalizado através de json para mostrar aqui.

362
00:31:02,625 --> 00:31:08,435
Da mesma forma, eu posso fazer aqui, FeedbackForm.

363
00:31:08,435 --> 00:31:15,840
Há outra propriedade associada a esse modelo de formulário chamado status,

364
00:31:15,840 --> 00:31:20,440
que me mostra o status do formulário neste momento,

365
00:31:20,440 --> 00:31:22,265
se ele é válido ou inválido.

366
00:31:22,265 --> 00:31:26,900
Então, eu vou adicionar esses dois no meu formulário aqui,

367
00:31:26,900 --> 00:31:30,285
para que isso seja mostrado no meu modelo.

368
00:31:30,285 --> 00:31:34,670
Isto é apenas para lhe dar uma visão instantânea do que

369
00:31:34,670 --> 00:31:41,620
o modelo de formulário contém no meu arquivo de script de tipo.

370
00:31:42,460 --> 00:31:47,590
Vamos salvar as alterações e ir e dar uma olhada rápida no nosso formulário.

371
00:31:47,590 --> 00:31:50,325
Voltando ao nosso navegador,

372
00:31:50,325 --> 00:31:55,630
agora você pode ver que os valores do formulário estão sendo mostrados

373
00:31:55,630 --> 00:32:04,460
aqui e o formulário está em boa forma para nos permitir digitar os valores.

374
00:32:04,460 --> 00:32:08,660
Então vamos digitar alguns valores aleatórios aqui e você pode

375
00:32:08,660 --> 00:32:14,090
imediatamente ver o valor está sendo refletido no modelo FeedbackForm lá,

376
00:32:14,090 --> 00:32:24,020
direita na parte superior e e-mail.

377
00:32:26,050 --> 00:32:29,295
Não importa, basta digitar algo.

378
00:32:29,295 --> 00:32:31,680
Então, este interruptor de alternância,

379
00:32:31,680 --> 00:32:34,575
você pode ver que quando você ligá-lo e desligar,

380
00:32:34,575 --> 00:32:39,385
o concordo transformar alterações de falso para verdadeiro.

381
00:32:39,385 --> 00:32:43,030
Então deixe-me deixá-lo em true e, em seguida, a seleção.

382
00:32:43,030 --> 00:32:50,640
Deixe-me selecionar e-mail e, em seguida, você verá que o tipo de contato aqui mudou para e-mail.

383
00:32:50,640 --> 00:32:56,060
Então, é assim que você selecionaria para alterar o valor.

384
00:32:56,060 --> 00:33:00,575
Então, vamos dizer e-mail e, em seguida, aqui,

385
00:33:00,575 --> 00:33:01,940
podemos digitar a mensagem.

386
00:33:01,940 --> 00:33:05,960
Algum texto aleatório aqui e você seria

387
00:33:05,960 --> 00:33:10,675
capaz de ver que o texto aleatório é refletido na mensagem lá.

388
00:33:10,675 --> 00:33:12,690
Vamos enviar o formulário.

389
00:33:12,690 --> 00:33:16,680
Então, quando você clica em Enviar você vê imediatamente no console,

390
00:33:16,680 --> 00:33:20,605
o valor sendo impresso aqui,

391
00:33:20,605 --> 00:33:21,870
neste objeto aqui.

392
00:33:21,870 --> 00:33:27,155
Então você pode navegar para ver todas as propriedades desse objeto,

393
00:33:27,155 --> 00:33:31,050
o modelo de formulário de feedback.

394
00:33:31,050 --> 00:33:38,210
Então, esta é uma ilustração de uma forma reativa dentro da nossa aplicação.

395
00:33:38,210 --> 00:33:41,850
Isso conclui este exercício.

396
00:33:41,850 --> 00:33:44,800
Neste exercício, vimos como podemos criar

397
00:33:44,800 --> 00:33:47,910
uma forma reativa dentro da nossa aplicação Angular.

398
00:33:47,910 --> 00:33:52,910
Este é também um bom ponto em que você pode fazer um commit do Git com a mensagem,

399
00:33:52,910 --> 00:33:55,670
reativo forma parte um.