1
00:00:00,000 --> 00:00:04,979
[MUSIC]

2
00:00:04,979 --> 00:00:09,281
Дайте нам знать кратко значение форм и форм поддержки в Angular.

3
00:00:09,281 --> 00:00:14,748
Мы уже видели использование форм в предыдущем курсе начальной загрузки и

4
00:00:14,748 --> 00:00:20,139
мы видели, как bootstrap позволяет нам стиль стандартных форм HDMI.

5
00:00:20,139 --> 00:00:24,664
В этом уроке мы рассмотрим угловую поддержку форм,

6
00:00:24,664 --> 00:00:30,200
два разных вида форм, управляемых шаблонами форм и реактивных форм.

7
00:00:30,200 --> 00:00:32,450
Мы рассмотрим разницу между ними и

8
00:00:32,450 --> 00:00:35,670
, где каждый из них подходит в нашем угловом приложении.

9
00:00:35,670 --> 00:00:39,400
Мы рассмотрим преимущества и недостатки каждого подхода

10
00:00:39,400 --> 00:00:43,490
более подробно в этом уроке и следующем уроке.

11
00:00:44,910 --> 00:00:50,880
Также мы рассмотрим валидацию формы, как Angular поддерживает валидацию формы,

12
00:00:50,880 --> 00:00:55,600
и как мы можем провести валидацию формы для нашей шаблонной формы

13
00:00:55,600 --> 00:01:00,420
в следующей лекции, после упражнения.

14
00:01:02,400 --> 00:01:10,230
Мы уже поняли, что формы поддерживают согласованный, эффективный и привлекательный опыт ввода данных для пользователей.

15
00:01:10,230 --> 00:01:14,350
Вы видите формы, используемые повсюду на веб-сайтах.

16
00:01:14,350 --> 00:01:14,940
Например,

17
00:01:14,940 --> 00:01:19,520
, когда вам нужно войти на веб-сайт, вы должны ввести свой идентификатор пользователя и пароль.

18
00:01:19,520 --> 00:01:22,210
Или когда вам нужно отправить информацию, например.

19
00:01:22,210 --> 00:01:26,871
Если вы бронируете билет в кино, или если вы размещаете

20
00:01:26,871 --> 00:01:32,027
заказ в интернет-магазине или во многих других случаях использования, формы

21
00:01:32,027 --> 00:01:37,482
широко используются для предоставления пользователям

22
00:01:37,482 --> 00:01:43,360
комплексного способа ввода информации на веб-сайты или веб-приложение.

23
00:01:43,360 --> 00:01:47,922
Угловая структура обеспечивает комплексную поддержку форм

24
00:01:47,922 --> 00:01:51,670
, включая валидацию форм и форм.

25
00:01:51,670 --> 00:01:57,379
Здесь мы используем поддержку Angular для двусторонней привязки данных

26
00:01:57,379 --> 00:02:03,690
и отслеживания изменений, которые мы делаем в элементах формы, а также проверки формы.

27
00:02:03,690 --> 00:02:07,030
Таким образом, когда вы вводите данные в поля ввода в вашей форме,

28
00:02:07,030 --> 00:02:11,330
данные автоматически оцениваются с помощью угловой поддержки для форм.

29
00:02:11,330 --> 00:02:15,980
Мы рассмотрим некоторые из них более подробно по мере прохождения уроков.

30
00:02:15,980 --> 00:02:21,010
Позвольте мне быстро напомнить вам о HTML-формах.

31
00:02:21,010 --> 00:02:24,790
Вы уже знаете, что формы поддерживаются через элемент формы

32
00:02:25,910 --> 00:02:28,200
на вашей HTML-странице.

33
00:02:28,200 --> 00:02:32,734
Наряду с элементом формы, в теге формы, вы также можете включить такие вещи

34
00:02:32,734 --> 00:02:37,561
<input>, как, <textarea>, <select>, и <button>s, и многое другое.

35
00:02:37,561 --> 00:02:42,585
Мы увидим, как Угловая поддержка выполняет вместе с элементами формы HTML

36
00:02:42,585 --> 00:02:47,608
, позволяет нам проектировать два различных вида форм,

37
00:02:47,608 --> 00:02:52,292
шаблонные формы, а также реактивные формы в Angular.

38
00:02:52,292 --> 00:02:58,585
В этом уроке мы сосредоточимся на угловой поддержке форм, управляемых шаблонами.

39
00:02:58,585 --> 00:03:03,125
В форме, управляемой шаблоном, они будут использовать Угловой шаблон вместе с

40
00:03:03,125 --> 00:03:07,250
элементами формы, которые мы только что видели, чтобы иметь возможность создавать формы и

41
00:03:07,250 --> 00:03:10,646
использовать угловую поддержку для форм, управляемых шаблонами.

42
00:03:10,646 --> 00:03:15,432
И мы сможем привязать конкретные директивы угловой формы к элементам формы

43
00:03:15,432 --> 00:03:20,450
в наших шаблонах, а затем использовать двустороннюю привязку данных

44
00:03:20,450 --> 00:03:25,336
, которая также формирует проверку и поддержку ошибок, что Angular предоставляет нам.

45
00:03:25,336 --> 00:03:28,128
В упражнении, которое следует немедленно,

46
00:03:28,128 --> 00:03:32,512
эта лекция будет посвящена тому, как мы можем разработать форму, управляемую шаблоном.

47
00:03:32,512 --> 00:03:37,164
В частности, мы также рассмотрим, как двусторонняя привязка данных с поддержкой

48
00:03:37,164 --> 00:03:41,986
Angular, используя директиву ngModel можно использовать для

49
00:03:41,986 --> 00:03:44,894
привязки информации из вашей формы к

50
00:03:44,894 --> 00:03:50,430
некоторые переменные JavaScript, которые вы объявили в своих классах.

51
00:03:50,430 --> 00:03:53,610
В упражнении, которое сразу же следует за этой лекцией,

52
00:03:53,610 --> 00:03:56,960
мы смотрим на то, как мы можем создать форму, управляемую шаблоном.

53
00:03:56,960 --> 00:04:01,350
В частности, мы рассмотрим, как двусторонняя привязка данных, поддерживающая Angular с использованием

54
00:04:01,350 --> 00:04:06,280
директивы ngModel, может быть использована для привязки информации от

55
00:04:06,280 --> 00:04:10,870
вашей формы к некоторым переменным JavaScript, которые вы объявляете в своих классах.

56
00:04:10,870 --> 00:04:14,860
И вот где банан в коробке, о которой мы говорили

57
00:04:14,860 --> 00:04:19,140
ранее с директивой ngModel приходит на помощь.

58
00:04:19,140 --> 00:04:22,880
По мере того, как мы пройдем упражнения, это станет еще яснее.

59
00:04:22,880 --> 00:04:27,139
Теперь давайте научимся использовать угловую поддержку для форм

60
00:04:27,139 --> 00:04:32,585
, управляемых шаблонами, чтобы проектировать наши формы в упражнениях.

61
00:04:32,585 --> 00:04:36,014
[МУЗЫКА]