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

2
00:00:04,979 --> 00:00:09,281
Deixe-nos saber brevemente formas de valor e suporte de formulários em Angular.

3
00:00:09,281 --> 00:00:14,748
Já vimos o uso de formulários no curso de bootstrap anterior e

4
00:00:14,748 --> 00:00:20,139
vimos como bootstrap nos permite estilizar os formulários HDMI padrão.

5
00:00:20,139 --> 00:00:24,664
Nesta lição, vamos olhar para o suporte angular para formulários,

6
00:00:24,664 --> 00:00:30,200
dois tipos diferentes de formas, formas orientadas por modelos e formas reativas.

7
00:00:30,200 --> 00:00:32,450
Vamos olhar para a diferença entre os dois, e

8
00:00:32,450 --> 00:00:35,670
onde cada um deles é adequado dentro da nossa aplicação Angular.

9
00:00:35,670 --> 00:00:39,400
Vamos analisar as vantagens e desvantagens de cada abordagem

10
00:00:39,400 --> 00:00:43,490
com mais detalhes nesta lição e na próxima lição.

11
00:00:44,910 --> 00:00:50,880
Além disso, vamos olhar para validação de formulário, como Angular suporta validação de formulário,

12
00:00:50,880 --> 00:00:55,600
e como podemos realizar validação de formulário para o nosso modelo impulsionado formulário

13
00:00:55,600 --> 00:01:00,420
na próxima palestra, após o exercício.

14
00:01:02,400 --> 00:01:06,867
Nós já percebemos que os formulários suportam uma experiência de entrada de dados coesa, eficaz e

15
00:01:06,867 --> 00:01:10,230
atraente para os usuários.

16
00:01:10,230 --> 00:01:14,350
Você vê formulários sendo usados em todos os lugares em sites.

17
00:01:14,350 --> 00:01:14,940
Por exemplo,

18
00:01:14,940 --> 00:01:19,520
quando você precisa fazer login em um site, você precisa digitar seu ID de usuário e senha.

19
00:01:19,520 --> 00:01:22,210
Ou quando você precisa enviar informações, por exemplo.

20
00:01:22,210 --> 00:01:26,871
Se você estiver reservando um ingresso de filme, ou se estiver fazendo

21
00:01:26,871 --> 00:01:32,027
um pedido em um supermercado online, ou muitos outros casos de uso,

22
00:01:32,027 --> 00:01:37,482
formulários são amplamente usados para fornecer uma maneira abrangente de usuários

23
00:01:37,482 --> 00:01:43,360
inserir informações nos sites ou na aplicação web.

24
00:01:43,360 --> 00:01:47,922
A estrutura Angular fornece suporte abrangente para formulários

25
00:01:47,922 --> 00:01:51,670
, incluindo formulários e validação de formulários.

26
00:01:51,670 --> 00:01:57,379
É aqui que aproveitamos o suporte Angular para vinculação de dados bidirecional

27
00:01:57,379 --> 00:02:03,690
e rastreamento de alterações que fazemos nos elementos de formulário, e também validação de formulário.

28
00:02:03,690 --> 00:02:07,030
Assim, quando você insere dados em campos de entrada em seu formulário,

29
00:02:07,030 --> 00:02:11,330
os dados são automaticamente avaliados com suporte Angular para formulários.

30
00:02:11,330 --> 00:02:15,980
Vamos olhar para alguns deles com mais detalhes à medida que passamos pelas lições.

31
00:02:15,980 --> 00:02:21,010
Deixe-me lembrá-lo rapidamente dos próprios formulários HTML.

32
00:02:21,010 --> 00:02:24,790
Você já sabe que os formulários são suportados por meio do elemento formulário

33
00:02:25,910 --> 00:02:28,200
em sua página HTML.

34
00:02:28,200 --> 00:02:32,734
Junto com o elemento de formulário, dentro da tag de formulário, você também pode incluir itens

35
00:02:32,734 --> 00:02:37,561
como <input><textarea>, <select>,, e <button>s, e muitos mais.

36
00:02:37,561 --> 00:02:42,585
Vamos ver como o suporte Angular funciona em conjunto com os elementos de formulário HTML

37
00:02:42,585 --> 00:02:47,608
, nos permitem projetar dois tipos diferentes de formas,

38
00:02:47,608 --> 00:02:52,292
formas orientadas por modelo e também formas reativas em Angular.

39
00:02:52,292 --> 00:02:58,585
Nesta lição, vamos nos concentrar no suporte Angular para formas orientadas por modelos.

40
00:02:58,585 --> 00:03:03,125
Em uma forma orientada por modelo, eles usarão o modelo angular junto com

41
00:03:03,125 --> 00:03:07,250
os elementos de formulário que acabamos de ver para ser capaz de construir formas e

42
00:03:07,250 --> 00:03:10,646
fazer uso de suporte angular para formas orientadas por modelo.

43
00:03:10,646 --> 00:03:15,432
E nós seremos capazes de vincular as diretivas específicas de formulário angular aos elementos de formulário

44
00:03:15,432 --> 00:03:20,450
dentro de nossos modelos e, em seguida, aproveitar a ligação de dados bidirecional

45
00:03:20,450 --> 00:03:25,336
que também formam validação e suporte a erros que Angular fornece para nós.

46
00:03:25,336 --> 00:03:28,128
No exercício que se segue imediatamente,

47
00:03:28,128 --> 00:03:32,512
esta palestra analisará como podemos desenhar uma forma orientada por modelos.

48
00:03:32,512 --> 00:03:37,164
Em particular, também veremos como vinculação de dados bidirecional com

49
00:03:37,164 --> 00:03:41,986
Angular suporta, usando a diretiva ngModel pode ser aproveitado para

50
00:03:41,986 --> 00:03:44,894
amarrando as informações do seu formulário para

51
00:03:44,894 --> 00:03:50,430
algumas variáveis JavaScript que você declarou dentro de suas classes.

52
00:03:50,430 --> 00:03:53,610
No exercício que imediatamente se segue a esta palestra,

53
00:03:53,610 --> 00:03:56,960
olhamos para como podemos desenhar uma forma orientada por modelos.

54
00:03:56,960 --> 00:04:01,350
Em particular, veremos como vinculação de dados bidirecional que Angular suporta usando

55
00:04:01,350 --> 00:04:06,280
a diretiva ngModel pode ser aproveitada para vincular as informações de

56
00:04:06,280 --> 00:04:10,870
seu formulário a algumas variáveis JavaScript que você declara dentro de suas classes.

57
00:04:10,870 --> 00:04:14,860
E é aqui que a banana em uma caixa que mencionamos

58
00:04:14,860 --> 00:04:19,140
anteriormente com a diretiva NGModel vem em nosso auxílio.

59
00:04:19,140 --> 00:04:22,880
À medida que passamos pelos exercícios, isso ficará ainda mais claro.

60
00:04:22,880 --> 00:04:27,139
Agora vamos aprender como aproveitar o suporte Angular para

61
00:04:27,139 --> 00:04:32,585
formulários orientados por modelo para projetar nossos formulários nos exercícios.

62
00:04:32,585 --> 00:04:36,014
[MÚSICA]