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

2
00:00:04,438 --> 00:00:08,934
Acabamos de completar o aprendizado sobre formulários orientados por modelos em

3
00:00:08,934 --> 00:00:12,310
angular na lição anterior.

4
00:00:12,310 --> 00:00:18,336
Angular também suporta outra maneira de projetar formas chamadas como formas reativas,

5
00:00:18,336 --> 00:00:25,390
as formas reativas usam o estilo reativo de programação para formas de suporte.

6
00:00:25,390 --> 00:00:28,050
Vamos falar sobre programação reativa brevemente em

7
00:00:28,050 --> 00:00:31,110
uma das lições posteriores neste módulo.

8
00:00:31,110 --> 00:00:34,180
Mas agora, vamos lidar com formas reativas e

9
00:00:34,180 --> 00:00:38,410
ver como podemos projetar formas reativas em angular e

10
00:00:38,410 --> 00:00:44,430
quais são as características únicas de fazer formas reativas em angular a seguir.

11
00:00:46,150 --> 00:00:52,310
O estilo reativo de programação defende o gerenciamento explícito de

12
00:00:52,310 --> 00:00:58,500
dados fluindo entre o modelo de dados não-UI e o modelo de formulário

13
00:00:58,500 --> 00:01:04,280
orientado para UI e esta é a abordagem que as formas reativas assumem Angular.

14
00:01:04,280 --> 00:01:09,240
Agora isso pode não fazer muito sentido para você neste momento, mas à medida que completamos este exercício

15
00:01:09,240 --> 00:01:14,860
e a palestra, ficará ainda mais claro para você

16
00:01:14,860 --> 00:01:21,530
por que a abordagem reativa se adequa a esse design de forma em certos contextos.

17
00:01:21,530 --> 00:01:26,630
Agora, na abordagem reativa, criamos uma árvore de objetos de controle de forma angular

18
00:01:26,630 --> 00:01:30,810
, dentro da classe de componente.

19
00:01:30,810 --> 00:01:33,300
Agora, nos formulários orientados por modelo que você já viu anteriormente,

20
00:01:34,450 --> 00:01:38,870
nós projetamos os formulários usando a abordagem de modelo HTML, então

21
00:01:38,870 --> 00:01:44,075
todos os controles de formulário somos colocados nesse formulário no modelo HTML e

22
00:01:44,075 --> 00:01:49,667
estamos primariamente gerenciar dados e eles estamos ligados ao seu objeto componente

23
00:01:49,667 --> 00:01:55,770
através do NG modelo diretamente.

24
00:01:55,770 --> 00:02:01,280
Nesta abordagem, vamos criar essa estrutura de formulário em nosso componente e

25
00:02:01,280 --> 00:02:06,220
, em seguida, amarrar a estrutura de formulário em controles firmes em nosso modelo, então

26
00:02:06,220 --> 00:02:10,860
vamos vincular a árvore de formulário que

27
00:02:10,860 --> 00:02:15,920
criar dentro de nossa classe de componente para os elementos de forma nativa

28
00:02:15,920 --> 00:02:20,910
dentro de nosso arquivo de modelo lá.

29
00:02:20,910 --> 00:02:25,530
Então, nesta abordagem, a classe componente tem acesso

30
00:02:25,530 --> 00:02:30,390
imediato ao modelo de dados, bem como à estrutura de controle de formulário e assim

31
00:02:30,390 --> 00:02:36,575
podemos então pegar o modelo de dados e empurrá-lo para a estrutura de controle de formulário e

32
00:02:36,575 --> 00:02:40,985
correspondentemente tirar as informações da estrutura de controle de formulário e

33
00:02:40,985 --> 00:02:43,355
então mapeá-lo para o modelo de dados.

34
00:02:43,355 --> 00:02:48,355
Assim, o modelo de dados vindo do back-end pode ser mapeado para formar a estrutura de controle

35
00:02:48,355 --> 00:02:53,410
que é refletido na exibição através desse modelo

36
00:02:54,550 --> 00:02:58,280
e a ponte entre eles é feita dentro da classe de componente

37
00:02:58,280 --> 00:03:02,660
criando a estrutura de formulário dentro da classe componente.

38
00:03:02,660 --> 00:03:07,330
Agora, isso não faz muito sentido para você neste momento, mas

39
00:03:07,330 --> 00:03:12,230
quando fizermos o exercício, ficará ainda mais claro para você como essa ligação

40
00:03:12,230 --> 00:03:17,080
entre o modelo de dados e a estrutura de controle firme pode ser realizada

41
00:03:17,080 --> 00:03:22,185
dentro da classe de componente no código de script de tipo do classe de componentes.

42
00:03:22,185 --> 00:03:26,700
Então, é aqui que vamos alavancar padrões reativos, testes e validação

43
00:03:26,700 --> 00:03:31,160
para grande vantagem, então esta abordagem de forma

44
00:03:31,160 --> 00:03:35,170
reativa suporta padrões reativos de programação, como eu disse, vamos falar

45
00:03:35,170 --> 00:03:39,880
programação reativa mais reativa um pouco mais tarde neste módulo.

46
00:03:40,900 --> 00:03:45,470
Além disso, o fato de criarmos os formulários no código

47
00:03:45,470 --> 00:03:50,840
significa que o teste e a avaliação de formulários se tornam muito mais fáceis.

48
00:03:50,840 --> 00:03:54,040
Formulários orientados por modelo são muito difíceis de testar

49
00:03:54,040 --> 00:03:58,770
porque grande parte da estrutura está no código do modelo, então

50
00:03:58,770 --> 00:04:03,800
a abordagem reativa se presta muito melhor para testes de unidade e

51
00:04:03,800 --> 00:04:10,150
também para validação de formulário como veremos um pouco mais tarde no exercício.

52
00:04:10,150 --> 00:04:15,650
Vamos refletir brevemente sobre algumas das vantagens de usar formas reativas.

53
00:04:15,650 --> 00:04:20,820
Uma das vantagens é que os valores na forma em que os elementos

54
00:04:20,820 --> 00:04:25,986
estão imediatamente disponíveis e síncronos com o código abstrato.

55
00:04:25,986 --> 00:04:29,990
Em forma orientada modelo assume ciclo para

56
00:04:29,990 --> 00:04:35,510
quaisquer alterações escritas o modelo para ser refletido em seu código lá,

57
00:04:35,510 --> 00:04:40,990
mas na abordagem reativa, o bit de sincronização, os dados e

58
00:04:40,990 --> 00:04:46,491
a vista é firmemente mantida.

59
00:04:46,491 --> 00:04:50,680
Em segundo lugar, as formas reativas, como já mencionei,

60
00:04:50,680 --> 00:04:55,560
são mais fáceis de fazer testes de unidade e isso se torna muito crucial

61
00:04:55,560 --> 00:05:01,240
quando você está projetando um ângulo muito complexo replicações.

62
00:05:01,240 --> 00:05:04,320
Os formulários reativos são suportados para algumas classes

63
00:05:04,320 --> 00:05:08,240
que estão disponíveis para a biblioteca de formulários angulares.

64
00:05:08,240 --> 00:05:13,390
Um deles é a classe FormControl que alimenta o controle de forma individual é

65
00:05:13,390 --> 00:05:19,350
que incluímos em nossa forma os elementos individuais e também nos permite

66
00:05:19,350 --> 00:05:24,360
rastrear o valor desses limites e fazer validação desses elementos.

67
00:05:25,500 --> 00:05:29,110
O FormGroup é um grupo de FormControl, portanto

68
00:05:29,110 --> 00:05:32,420
quando você deseja organizar FormControls juntos como um grupo e

69
00:05:32,420 --> 00:05:37,700
, em seguida, rastrear informações sobre esses grupos como um todo, então o FormGroup

70
00:05:37,700 --> 00:05:43,240
permite aglomerar um grupo de FormControls juntos.

71
00:05:44,780 --> 00:05:48,850
Além disso, também temos uma classe AbstractControl que é um resumo

72
00:05:48,850 --> 00:05:53,930
classe baseada para classes FormControl, que também pode ser usado para nossa vantagem

73
00:05:53,930 --> 00:05:58,500
embora nós queremos vê-los especificamente no exercício mais tarde,

74
00:05:58,500 --> 00:06:02,630
mas vamos voltar para usá-los em um momento posterior.

75
00:06:05,600 --> 00:06:10,430
E também temos uma classe FormarRay que permite que você defina

76
00:06:10,430 --> 00:06:15,410
uma matriz numericamente indexada de instâncias AbstractControl,

77
00:06:15,410 --> 00:06:19,460
novamente, tanto o AbstractControl quanto o FormarRay, não examinaremos explicitamente

78
00:06:19,460 --> 00:06:24,950
nesta lição particular, mas vamos vê-los mais tarde no curso.

79
00:06:24,950 --> 00:06:28,070
Outro aspecto interessante das formas reativas

80
00:06:28,070 --> 00:06:29,950
é a disponibilidade do FormBuilder.

81
00:06:29,950 --> 00:06:36,925
A classe FormBuilder permite o uso para criar os formulários dentro do nosso código TypeScript e

82
00:06:36,925 --> 00:06:42,115
, em seguida, ser capaz de amarrá-los com os controles de modelo lá.

83
00:06:42,115 --> 00:06:47,218
Então, para usar a classe Form Builder você importar o Form Builder a partir dos formulários angular

84
00:06:47,218 --> 00:06:52,483
e, em seguida, lá depois, você pode usar o construtor de formulário para construir o formulário,

85
00:06:52,483 --> 00:06:57,424
como se você usar e fazer o que suas classes de conversor de formulário e as classes de grupo de formulário

86
00:06:57,424 --> 00:07:03,040
como vimos no slide anterior que código é um pouco mais elaborado.

87
00:07:03,040 --> 00:07:08,180
Mas usando a classe FormBuilder, ele reduz a repetição inclítica de em seu código

88
00:07:08,180 --> 00:07:13,610
e o torna muito mais compacto para definir fontes.

89
00:07:13,610 --> 00:07:16,440
Usaremos a classe FormBuilder como a abordagem para

90
00:07:16,440 --> 00:07:19,760
formas de construção no exercício que se segue e

91
00:07:19,760 --> 00:07:26,170
este exemplo é derivado do exercício que você fará logo após esta palestra.

92
00:07:26,170 --> 00:07:31,320
Então aqui você pode ver que nós construímos um formulário, como um grupo desses elementos de controle de formulário

93
00:07:31,320 --> 00:07:39,100
e cada um deles tendo nome específico e também o valor dado a eles.

94
00:07:39,100 --> 00:07:43,540
Ao criar o modelo de formulário em nosso código datilografado,

95
00:07:43,540 --> 00:07:48,030
você não preenche automaticamente o modelo de formulário, você precisa preencher exclusivamente

96
00:07:48,030 --> 00:07:51,190
o modelo de formulário especialmente se você obter os dados em um modelo de dados,

97
00:07:51,190 --> 00:07:55,280
então o modelo de dados precisa ser mapeado em seu modelo de formulário para preencher os valores,

98
00:07:55,280 --> 00:08:00,580
para que o e o modelo de dados são mantidos separados em formas reativas.

99
00:08:00,580 --> 00:08:05,340
Nos formulários orientados por modelo, você viu que estamos tentando diretamente os objetos de dados

100
00:08:05,340 --> 00:08:09,990
do arquivo de modelo para nosso código abstrato.

101
00:08:09,990 --> 00:08:12,710
Então, neste caso, o formulário e o modelo de dados são mantidos separados, então

102
00:08:12,710 --> 00:08:17,610
todas as alterações que você fizer nos elementos DOM

103
00:08:17,610 --> 00:08:22,660
em seu formulário fluirão para o modelo de formulário e

104
00:08:22,660 --> 00:08:28,030
você tem que refletir explicitamente os dados do formulário de volta para

105
00:08:28,030 --> 00:08:33,670
esse modelo de dados, mesmo através de um serviço ou qualquer meio que você escolher,

106
00:08:33,670 --> 00:08:39,240
então essa separação nos ajuda a projetar nosso código muito melhor, como veremos mais tarde.

107
00:08:40,520 --> 00:08:45,490
Dois métodos estão disponíveis para preencher um modelo de formulário a partir de um modelo de dados.

108
00:08:45,490 --> 00:08:50,280
Temos o método setValue (), que nos permite atribuir cada controle de formulário

109
00:08:50,280 --> 00:08:54,710
a um valor específico do modelo de dados ou temos um patchValue (),

110
00:08:54,710 --> 00:08:59,360
que permite atualizar apenas alguns controles dentro do seu modelo de formulário.

111
00:08:59,360 --> 00:09:02,970
Assim, uma vez que você obter o modelo de dados do back-end, do modelo de dados,

112
00:09:02,970 --> 00:09:08,030
você pode aplicar os valores em seu modelo de formulário ou mapear os valores de

113
00:09:08,030 --> 00:09:13,130
seu modelo de dados em seu modelo de formulário, muitas vezes, vamos criar o modelo de dados,

114
00:09:13,130 --> 00:09:18,740
que razoavelmente espelha de perto a estrutura do formulário.

115
00:09:18,740 --> 00:09:22,060
No exercício que se segue você veria que eu tenho um modelo de dados

116
00:09:22,060 --> 00:09:24,210
que é baseado em uma classe,

117
00:09:24,210 --> 00:09:30,030
que espelha muito de perto o modelo de formulário que usamos dentro do nosso exemplo lá.

118
00:09:31,740 --> 00:09:38,263
Com esta rápida compreensão de formas reativas, vamos agora prosseguir para o exercício

119
00:09:38,263 --> 00:09:43,880
onde vamos dobrar uma forma reativa dentro de nossa aplicação angular e

120
00:09:43,880 --> 00:09:47,958
ao longo do caminho consolidar algumas das terminologia e

121
00:09:47,958 --> 00:09:52,866
também algumas das idéias que acabamos de explorar nesta lição.

122
00:09:52,866 --> 00:09:59,009
[MÚSICA]