1
00:00:03,890 --> 00:00:09,395
Acabamos de aprender sobre o suporte Angular para formulários,

2
00:00:09,395 --> 00:00:12,125
e, em particular, a forma orientada por modelos.

3
00:00:12,125 --> 00:00:17,520
Neste exercício, criaremos um formulário orientado por modelo e, em seguida, incluiremos esse

4
00:00:17,520 --> 00:00:23,375
em nosso diálogo componente de login que criamos no exercício anterior.

5
00:00:23,375 --> 00:00:29,580
Nesta palestra o formulário orientado por modelo que criamos,

6
00:00:29,580 --> 00:00:34,850
permite que o usuário digite seu nome de usuário e senha no formulário de login,

7
00:00:34,850 --> 00:00:37,700
e, em seguida, envie essas informações para nosso aplicativo.

8
00:00:37,700 --> 00:00:41,825
Agora, como essas informações são processadas pelo lado do servidor,

9
00:00:41,825 --> 00:00:44,990
que é deixado para um curso posterior.

10
00:00:44,990 --> 00:00:49,310
Mas, no momento, temos uma maneira de capturar o nome de usuário e senha

11
00:00:49,310 --> 00:00:54,285
enviados pelo usuário através do formulário orientado por modelo de login,

12
00:00:54,285 --> 00:00:58,210
que vamos projetar neste exercício.

13
00:00:58,210 --> 00:01:01,115
Procedendo com o exercício,

14
00:01:01,115 --> 00:01:05,030
o primeiro passo para ser capaz de alavancar o uso

15
00:01:05,030 --> 00:01:08,890
de formulários orientados por modelo é ir para o aplicativo module.ts

16
00:01:08,890 --> 00:01:17,140
arquivo e, em seguida, importar alguns módulos de suporte para a nossa aplicação.

17
00:01:17,140 --> 00:01:20,764
Então, a primeira coisa que eu vou importar é

18
00:01:20,764 --> 00:01:33,155
o MatFormFieldModule do campo de formulário de material angular

19
00:01:33,155 --> 00:01:38,085
.

20
00:01:38,085 --> 00:01:44,600
Então, isso nos permite agrupar um monte de itens em um campo de formulário lá.

21
00:01:44,600 --> 00:01:52,190
Em seguida, também importaremos o MatInputModule.

22
00:01:52,190 --> 00:01:58,100
O módulo de entrada suporta o componente de entrada que é

23
00:01:58,100 --> 00:02:03,650
um componente Angular Material

24
00:02:03,650 --> 00:02:09,690
estilizado que suporta o campo de formulário de entrada a partir de formulários HTML aqui.

25
00:02:09,690 --> 00:02:15,520
Então, também, deixe-me importar um MatCheckBox,

26
00:02:18,680 --> 00:02:29,895
o módulo correspondente da caixa de seleção Material Angular.

27
00:02:29,895 --> 00:02:32,690
Então, esses três suportam

28
00:02:32,690 --> 00:02:36,410
três elementos de formulário que vamos usar quando criamos nosso aplicativo.

29
00:02:36,410 --> 00:02:42,420
O módulo de campo de formulário nos permite agrupar um monte de elementos de formulário lá.

30
00:02:42,420 --> 00:02:46,240
O módulo de entrada nos permite criar um campo de entrada lá.

31
00:02:46,240 --> 00:02:48,460
O módulo de caixa de seleção, como você esperaria,

32
00:02:48,460 --> 00:02:50,570
nos permite criar uma caixa de seleção.

33
00:02:50,570 --> 00:02:53,670
Além disso, também preciso importar

34
00:02:53,670 --> 00:03:06,190
o FormsModule de formulários angulares.

35
00:03:06,190 --> 00:03:10,130
O FormsModule é aquele que suporta formulários em Angular.

36
00:03:10,130 --> 00:03:12,445
Este é o que suporta formulários orientados por modelo.

37
00:03:12,445 --> 00:03:15,280
Então, agora que importamos estes, obviamente,

38
00:03:15,280 --> 00:03:23,775
o próximo passo é ir para o decorador ngModule e, em seguida, puxá-los para o lugar aqui.

39
00:03:23,775 --> 00:03:30,560
Então, vamos entrar aqui e, em seguida, inserir o FormsModule.

40
00:03:30,660 --> 00:03:38,200
Deixe-me inserir o FormFieldModule,

41
00:03:38,200 --> 00:03:45,075
o InputModule, o CheckBoxModule aqui.

42
00:03:45,075 --> 00:03:49,325
Então, agora meu módulo de aplicativo está pronto

43
00:03:49,325 --> 00:03:55,125
para suportar o uso de formulários orientados por modelo em nosso aplicativo.

44
00:03:55,125 --> 00:03:57,485
Agora que concluímos isso,

45
00:03:57,485 --> 00:03:59,530
vamos para o componente de login.

46
00:03:59,530 --> 00:04:02,320
Grande parte do nosso trabalho está no componente de login.

47
00:04:02,320 --> 00:04:04,090
Deixe-me primeiro projetar o formulário.

48
00:04:04,090 --> 00:04:07,975
Então, indo para o arquivo de modelo de componente de login,

49
00:04:07,975 --> 00:04:14,345
deixe-me adicionar no modelo para o nosso formulário para criar o formulário aqui.

50
00:04:14,345 --> 00:04:16,190
Então, no topo,

51
00:04:16,190 --> 00:04:25,940
Eu vou criar um p

52
00:04:25,940 --> 00:04:30,715
que irá exibir as informações que eu digitei no formulário.

53
00:04:30,715 --> 00:04:36,750
No código, teremos uma variável JavaScript chamada user,

54
00:04:36,750 --> 00:04:41,175
que será vinculado aos campos neste formulário.

55
00:04:41,175 --> 00:04:42,500
Agora, quando criarmos isso,

56
00:04:42,500 --> 00:04:43,690
então ficará mais claro.

57
00:04:43,690 --> 00:04:45,490
Agora, aqui, ao incluir isso,

58
00:04:45,490 --> 00:04:50,100
o que estou habilitando é mostrar as mudanças.

59
00:04:50,100 --> 00:04:52,990
À medida que digitamos informações no formulário,

60
00:04:52,990 --> 00:04:56,390
as alterações correspondentes que acontecem no código para

61
00:04:56,390 --> 00:05:00,880
refletem o estado do formulário podem ser mostradas ali.

62
00:05:00,880 --> 00:05:04,500
Agora, além disso, agora vou criar o formulário aqui.

63
00:05:04,500 --> 00:05:07,210
Então, vamos entrar e, em seguida, adicionar o elemento formulário aqui.

64
00:05:07,210 --> 00:05:09,470
Para este elemento de formulário,

65
00:05:09,470 --> 00:05:11,000
Eu vou aplicar

66
00:05:11,000 --> 00:05:15,260
o atributo novalidate aqui porque

67
00:05:15,260 --> 00:05:19,625
queremos que a validação de formulário a ser cuidado por Angular e não

68
00:05:19,625 --> 00:05:28,820
pela validação de formulário HTML padrão

69
00:05:28,820 --> 00:05:30,230
que o suporte do navegador.

70
00:05:30,230 --> 00:05:38,810
Então, vamos mudar essa responsabilidade para o nosso aplicativo Angular em si.

71
00:05:38,810 --> 00:05:44,800
Então, é por isso que especifico o atributo novalidate para o meu telefone.

72
00:05:44,800 --> 00:05:47,310
Então, isso cria meu formulário aqui.

73
00:05:47,310 --> 00:05:53,720
Aqui dentro, eu vou usar o conteúdo mat-dialog-.

74
00:05:53,790 --> 00:05:58,360
Agora, o mat-dialog-content, como você esperaria,

75
00:05:58,360 --> 00:06:03,740
é uma área que contém o conteúdo da caixa de diálogo em si.

76
00:06:03,740 --> 00:06:06,970
Então, é por isso que colocamos esse conteúdo de caixa de diálogo aqui.

77
00:06:06,970 --> 00:06:14,265
Então, aqui, eu vou criar meu formulário aqui.

78
00:06:14,265 --> 00:06:16,675
Então, eu coloquei um p lá.

79
00:06:16,675 --> 00:06:23,915
Dentro desse p, vou usar um mat-forma-campo aqui.

80
00:06:23,915 --> 00:06:28,805
Então, o mat-form-field me permite agrupar um conjunto

81
00:06:28,805 --> 00:06:33,845
de elementos relacionados ao formulário que eu uso juntos.

82
00:06:33,845 --> 00:06:39,765
Então, aqui, vou colocar na entrada aqui.

83
00:06:39,765 --> 00:06:44,505
Então, o campo de formulário de entrada de formulários de arquivo HTML.

84
00:06:44,505 --> 00:06:50,255
Então, para isso, vou aplicar o atributo matInput

85
00:06:50,255 --> 00:06:57,360
que nos permitirá aplicar o estilo de design de material para esta entrada.

86
00:06:57,360 --> 00:07:04,635
Em seguida, vamos dar um espaço reservado para isso como nome de usuário,

87
00:07:04,635 --> 00:07:06,569
e como você esperaria,

88
00:07:06,569 --> 00:07:12,220
eo tipo será o tipo de texto aqui.

89
00:07:15,140 --> 00:07:19,830
Deixe-me adicionar no NGModel.

90
00:07:19,830 --> 00:07:30,000
Então, um formulário orientado por modelo é suportado através do atributo ngModel aqui.

91
00:07:30,000 --> 00:07:31,520
Então, com o NGModel.

92
00:07:31,520 --> 00:07:36,130
Então, você pode ver a forma de caixa de entrada banana de declarar isso.

93
00:07:36,130 --> 00:07:40,270
Em seguida, diremos user.username.

94
00:07:40,270 --> 00:07:48,345
Então, este usuário vai ser um objeto JavaScript no meu arquivo TypeScript,

95
00:07:48,345 --> 00:07:52,440
que irá conter uma propriedade de nome de usuário lá,

96
00:07:52,440 --> 00:07:58,540
que irá rastrear o valor que você inserir neste campo de entrada no meu formulário lá.

97
00:07:58,540 --> 00:08:06,320
Então, é por isso que estamos amarrando essas informações de campo de entrada para este objeto JavaScript.

98
00:08:06,320 --> 00:08:08,890
Então, esta é a ligação de dados bidirecional que estamos fazendo

99
00:08:08,890 --> 00:08:13,250
entre o elemento de formulário e o código JavaScript correspondente.

100
00:08:13,250 --> 00:08:19,640
Em seguida, vamos dar a este um nome como nome de usuário aqui.

101
00:08:19,640 --> 00:08:24,495
Então, esse é o meu primeiro campo de formulário que eu adicionei aqui.

102
00:08:24,495 --> 00:08:29,330
Agora, da mesma forma, adicionarei no segundo campo de formulário para a senha.

103
00:08:29,330 --> 00:08:36,255
Então, para isso, deixe-me apenas copiar isso e, em seguida, colá-lo aqui.

104
00:08:36,255 --> 00:08:41,820
Então, o segundo campo seria Input, MatInput,

105
00:08:41,820 --> 00:08:47,760
espaço reservado é password,

106
00:08:47,760 --> 00:08:52,360
e, em seguida, o tipo é password.

107
00:08:52,360 --> 00:09:01,385
Então, o elemento de entrada de senha do suporte formulário HTML5.

108
00:09:01,385 --> 00:09:11,050
O NGModel em si será vinculado à senha do usuário e o nome seria senha.

109
00:09:11,050 --> 00:09:16,335
Então, você vê que o objeto JavaScript do usuário agora contém duas propriedades,

110
00:09:16,335 --> 00:09:20,700
nome de usuário e senha, que rastreará as credenciais do usuário aqui.

111
00:09:20,700 --> 00:09:24,995
Então, estes dois campos de formulário dentro deste p aqui,

112
00:09:24,995 --> 00:09:27,740
e, em seguida, também vamos adicionar em um

113
00:09:27,740 --> 00:09:35,795
mais chamado como mat-checkbox.

114
00:09:35,795 --> 00:09:41,050
Você viu que tínhamos incluído o módulo de caixa de seleção anteriormente.

115
00:09:41,050 --> 00:09:43,290
Então, vamos adicionar isso.

116
00:09:43,290 --> 00:09:48,735
Agora, esta caixa de seleção que quando marcada informará

117
00:09:48,735 --> 00:09:55,990
meu aplicativo Angular que o nome de usuário e senha devem ser salvos no aplicativo.

118
00:09:55,990 --> 00:10:01,220
Então, deixe-me amarrar isso com o modelo NG para

119
00:10:01,220 --> 00:10:09,730
uma propriedade correspondente chamada remember no objeto de usuário.

120
00:10:09,730 --> 00:10:11,060
Então, esta será,

121
00:10:11,060 --> 00:10:14,020
esta propriedade será verdadeira ou falsa dependendo

122
00:10:14,020 --> 00:10:17,315
se a caixa de seleção está marcada ou desmarcada.

123
00:10:17,315 --> 00:10:19,830
Então, é assim que rastreamos.

124
00:10:19,830 --> 00:10:24,795
Então, estamos fazendo a ligação de dados bidirecional entre esta caixa de seleção e

125
00:10:24,795 --> 00:10:32,330
esta propriedade chamada remember do objeto JavaScript usuário no meu código lá.

126
00:10:32,330 --> 00:10:36,260
Então o nome seria lembrar,

127
00:10:36,260 --> 00:10:43,590
e então vamos dar a este um rótulo como lembrar de mim.

128
00:10:43,850 --> 00:10:46,620
Então, quando o usuário verificar isso,

129
00:10:46,620 --> 00:10:50,200
então as informações do usuário serão lembradas aqui.

130
00:10:50,200 --> 00:10:52,410
Então, essa é a caixa de seleção mat-que adicionamos.

131
00:10:52,410 --> 00:10:54,270
Então, temos três campos aqui,

132
00:10:54,270 --> 00:10:56,585
o nome de usuário, a senha,

133
00:10:56,585 --> 00:11:02,880
e, em seguida, uma caixa de seleção aqui no meu formulário aqui.

134
00:11:02,880 --> 00:11:06,090
Então, este é um conteúdo mat-diálogo aqui.

135
00:11:06,090 --> 00:11:08,800
Agora, além do conteúdo de diálogo mat-,

136
00:11:08,800 --> 00:11:14,985
Eu também posso adicionar ações de diálogo mat-aqui.

137
00:11:14,985 --> 00:11:23,820
Agora, as ações de diálogo podem conter os botões que correspondem a esta caixa de diálogo.

138
00:11:23,820 --> 00:11:28,145
Então, isso é o que vai atuar como os botões de ação no diálogo,

139
00:11:28,145 --> 00:11:32,210
e também como eles estão dentro do formulário,

140
00:11:32,210 --> 00:11:36,485
esses botões também funcionarão como botões de envio de formulário para mim.

141
00:11:36,485 --> 00:11:44,530
Então, aqui, deixe-me fazer um espaçador flex classe span,

142
00:11:46,580 --> 00:11:52,670
e, em seguida, deixe-me adicionar um botão,

143
00:11:55,950 --> 00:12:02,140
mat-button, e então este botão,

144
00:12:02,140 --> 00:12:07,090
Eu também vou transformar isso em um botão de fechamento mat-diálogo.

145
00:12:07,090 --> 00:12:12,115
Então, este seria um botão de cancelamento que eu vou incluir no meu formulário aqui,

146
00:12:12,115 --> 00:12:14,925
então isso é clicado o diálogo será demitido,

147
00:12:14,925 --> 00:12:17,960
e essencialmente o que significa que você não está enviando o formulário lá.

148
00:12:17,960 --> 00:12:20,505
Então, que também funciona como o botão cancelar para o formulário,

149
00:12:20,505 --> 00:12:23,595
e, em seguida, também dispensar o diálogo ao mesmo tempo.

150
00:12:23,595 --> 00:12:27,180
Então, usando este atributo para este botão,

151
00:12:27,180 --> 00:12:31,595
estamos declarando isso como o botão que dispensar a falha,

152
00:12:31,595 --> 00:12:36,940
da mesma forma que temos este botão na barra de ferramentas.

153
00:12:36,940 --> 00:12:38,990
Então, a caixa de diálogo de tapetes fecha lá.

154
00:12:38,990 --> 00:12:42,470
Então outro botão que teremos é

155
00:12:42,470 --> 00:12:49,490
para enviar para que

156
00:12:49,490 --> 00:12:55,030
este tipo de botão seria o botão enviar dentro de um formulário lá.

157
00:12:55,030 --> 00:12:56,315
Então, quando isso é clicado,

158
00:12:56,315 --> 00:13:01,495
que aciona a submissão do formulário para este formulário aqui,

159
00:13:01,495 --> 00:13:06,420
e, em seguida, deixe-me adicionar em uma classe a isso,

160
00:13:06,420 --> 00:13:13,795
vamos dizer fundo primário, e texto floral.

161
00:13:13,795 --> 00:13:19,345
Essas classes que eu já adicionei ao meu arquivo Styles.acss lá.

162
00:13:19,345 --> 00:13:24,800
Então, texto floral branco,

163
00:13:24,800 --> 00:13:31,620
e este botão seria rotulado como o botão de login lá.

164
00:13:31,620 --> 00:13:36,090
Então, este seria um botão de cor azul que será mostrado na tela lá.

165
00:13:36,090 --> 00:13:43,275
Então, com isso, minha estrutura de formulário é criada no modelo lá.

166
00:13:43,275 --> 00:13:49,355
Agora, o próximo passo é ir para o código e, em seguida, lidar com a submissão do formulário em si.

167
00:13:49,355 --> 00:13:54,070
Então, agora indo para o arquivo component.ts login,

168
00:13:54,070 --> 00:13:57,400
precisamos lidar com a submissão do formulário aqui.

169
00:13:57,400 --> 00:14:02,070
Agora, o primeiro passo que eu vou fazer é quando este componente de login é criado,

170
00:14:02,070 --> 00:14:12,110
vamos criar um objeto de usuário aqui com as propriedades nome de usuário,

171
00:14:12,110 --> 00:14:16,550
que seria uma string vazia para começar com,

172
00:14:16,610 --> 00:14:22,570
senha que também será uma string vazia para começar,

173
00:14:22,570 --> 00:14:27,050
e, em seguida, lembre-se qual é falsa.

174
00:14:27,050 --> 00:14:29,640
Agora, declarando isso aqui,

175
00:14:29,640 --> 00:14:33,530
nós também estamos dizendo que agora podemos amarrar em

176
00:14:33,530 --> 00:14:40,210
essas três propriedades aos três elementos de formulário no meu modelo.

177
00:14:40,210 --> 00:14:43,920
Então, isso é o que acabamos alcançando aqui.

178
00:14:43,920 --> 00:14:46,440
Para o construtor, vamos

179
00:14:46,440 --> 00:14:55,640
me injetar o diálogo ref aqui,

180
00:14:55,880 --> 00:15:05,410
mat-diálogo ref, e este ref diálogo mat tomará o componente correspondente.

181
00:15:05,410 --> 00:15:08,755
Então, esta é uma referência a este componente de login aqui.

182
00:15:08,755 --> 00:15:11,990
Então, isso nos diz quando esta- quando este é submetido,

183
00:15:11,990 --> 00:15:14,060
como lidar com isso.

184
00:15:14,060 --> 00:15:21,985
Então, aqui, deixe-me adicionar em uma função on submit aqui,

185
00:15:21,985 --> 00:15:24,155
e dentro da função on submit,

186
00:15:24,155 --> 00:15:27,935
Eu vou simplesmente fazer login,

187
00:15:27,935 --> 00:15:32,145
registrar as informações de usuários correspondentes,

188
00:15:32,145 --> 00:15:35,690
então o usuário clica no formulário de login,

189
00:15:35,690 --> 00:15:39,430
o formulário de login e envia o formulário de login.

190
00:15:39,430 --> 00:15:44,585
Eu só vou registrar as informações do usuário no console no momento.

191
00:15:44,585 --> 00:15:49,150
Mais tarde, vamos projetar no curso do lado do servidor.

192
00:15:49,150 --> 00:15:52,310
Nós vamos lidar com o processo de login real quando

193
00:15:52,310 --> 00:15:57,280
nosso servidor está pronto e é capaz de lidar com o login do usuário.

194
00:15:57,280 --> 00:16:03,710
Então, depois disso, vamos dizer que este diálogo ref fechar.

195
00:16:03,710 --> 00:16:06,255
Agora, por que incluímos isso aqui?

196
00:16:06,255 --> 00:16:08,105
Então, quando o formulário é enviado,

197
00:16:08,105 --> 00:16:13,960
nós também queremos descartar o componente lá,

198
00:16:13,960 --> 00:16:15,190
o componente de diálogo lá.

199
00:16:15,190 --> 00:16:16,800
Então, chamando isso,

200
00:16:16,800 --> 00:16:19,120
este diálogo ref fechar,

201
00:16:19,120 --> 00:16:23,620
estamos pedindo que o componente diálogo seja fechado aqui.

202
00:16:23,620 --> 00:16:29,650
Então, essa é a razão pela qual eu recebo uma referência ao componente de login aqui,

203
00:16:29,650 --> 00:16:33,655
que está agindo como meu componente de diálogo aqui.

204
00:16:33,655 --> 00:16:37,445
Então, seremos capazes de fechar o componente de diálogo fazendo isso.

205
00:16:37,445 --> 00:16:39,350
Assim, uma vez que o usuário envia o formulário,

206
00:16:39,350 --> 00:16:41,440
você registrará as informações do usuário,

207
00:16:41,440 --> 00:16:46,415
e, em seguida, fechará a caixa de diálogo. É isso.

208
00:16:46,415 --> 00:16:51,640
Vamos salvar as alterações e, em seguida, ir e dar uma olhada no aplicativo atualizado.

209
00:16:51,640 --> 00:16:54,590
Vá para o nosso aplicativo no navegador,

210
00:16:54,590 --> 00:17:02,900
deixe-me abrir o Console JavaScript para que você possa ver as informações que estão sendo logadas.

211
00:17:02,900 --> 00:17:09,890
Deixe-me abrir a caixa de diálogo de login aqui com o formulário já no lugar,

212
00:17:09,890 --> 00:17:12,425
o nome de usuário e senha já no lugar.

213
00:17:12,425 --> 00:17:15,820
Então, deixe-me digitar o nome de um usuário.

214
00:17:15,820 --> 00:17:19,165
Estou sendo narcisista aqui.

215
00:17:19,165 --> 00:17:22,710
Então, estou digitando o nome de usuário e senha aqui.

216
00:17:22,710 --> 00:17:26,495
Agora, observe que à medida que eu digitar as informações aqui,

217
00:17:26,495 --> 00:17:33,570
já que estou mostrando o valor do objeto JavaScript do usuário aqui,

218
00:17:33,570 --> 00:17:42,775
todas as alterações que eu fizer estão imediatamente sendo refletidas na tela aqui.

219
00:17:42,775 --> 00:17:50,110
Também a caixa de seleção lembrar sendo marcada e desligada aqui.

220
00:17:50,110 --> 00:17:53,360
Então, quando eu enviar o formulário aqui,

221
00:17:53,360 --> 00:17:56,040
você pode ver que no console,

222
00:17:56,040 --> 00:17:59,350
as informações do usuário são registradas no console,

223
00:17:59,350 --> 00:18:00,595
o nome de usuário, a senha,

224
00:18:00,595 --> 00:18:03,440
e o valor de lembrar está bloqueado no console.

225
00:18:03,440 --> 00:18:06,170
Então, agora você pode ver que meu formulário de login,

226
00:18:06,170 --> 00:18:09,275
o formulário orientado por modelo está funcionando corretamente.

227
00:18:09,275 --> 00:18:12,305
Com isso, completamos este exercício,

228
00:18:12,305 --> 00:18:18,965
onde vimos como podemos projetar uma forma orientada por modelo em nossa aplicação Angular.

229
00:18:18,965 --> 00:18:22,870
Este é um bom momento para você fazer um Git Commit com a mensagem,

230
00:18:22,870 --> 00:18:26,000
Modelo Driven Forms Parte 1.