1
00:00:00,000 --> 00:00:04,438
[МУЗЫКА]

2
00:00:04,438 --> 00:00:08,934
Мы только что завершили изучение форм, управляемых шаблонами в

3
00:00:08,934 --> 00:00:12,310
угловой в предыдущем уроке.

4
00:00:12,310 --> 00:00:18,336
Angular также поддерживает другой способ проектирования форм, называемых как реактивные формы,

5
00:00:18,336 --> 00:00:25,390
реактивные формы используют реактивный стиль программирования для поддерживающих форм.

6
00:00:25,390 --> 00:00:28,050
Мы поговорим о реактивном программировании кратко в

7
00:00:28,050 --> 00:00:31,110
одном из последующих уроков в этом модуле.

8
00:00:31,110 --> 00:00:34,180
Но прямо сейчас мы будем иметь дело с реактивными формами и

9
00:00:34,180 --> 00:00:38,410
посмотрим, как мы можем проектировать реактивные формы в угловых и

10
00:00:38,410 --> 00:00:44,430
, каковы уникальные особенности выполнения реактивных форм в угловых последующих.

11
00:00:46,150 --> 00:00:52,310
Реактивный стиль программирования выступает за явное управление данными

12
00:00:52,310 --> 00:00:58,500
, протекающими между моделью данных, отличной от пользовательского интерфейса, и модель формы, ориентированная на UI

13
00:00:58,500 --> 00:01:04,280
, и это подход, который реактивные формы принимают в Angular.

14
00:01:04,280 --> 00:01:09,240
Теперь это может не иметь большого смысла для вас в данный момент, но по мере того, как мы завершаем это упражнение

15
00:01:09,240 --> 00:01:14,860
и лекцию, вам станет еще яснее

16
00:01:14,860 --> 00:01:21,530
, почему реактивный подход подходит для дизайна формы в определенных контекстах.

17
00:01:21,530 --> 00:01:26,630
Теперь в реактивном подходе мы создаем дерево объектов управления угловой

18
00:01:26,630 --> 00:01:30,810
формы, внутри класса компонента.

19
00:01:30,810 --> 00:01:33,300
Теперь в шаблонах управляемых форм, которые вы видели ранее,

20
00:01:34,450 --> 00:01:38,870
мы проектируем формы с использованием подхода шаблона HTML, поэтому

21
00:01:38,870 --> 00:01:44,075
все элементы управления формы мы помещаем в эту форму в шаблоне HTML и

22
00:01:44,075 --> 00:01:49,667
мы в первую очередь управляем данными, и они мы привязаны к их

23
00:01:49,667 --> 00:01:55,770
объекта компонента через NG модель напрямую.

24
00:01:55,770 --> 00:02:01,280
В этом подходе мы создадим эту структуру формы в нашем компоненте и

25
00:02:01,280 --> 00:02:06,220
затем связать структуру формы в фирменные элементы управления в нашем шаблоне, поэтому

26
00:02:06,220 --> 00:02:10,860
мы свяжем дерево форм, которое мы

27
00:02:10,860 --> 00:02:15,920
создаем в нашем классе компонентов, с родной формой

28
00:02:15,920 --> 00:02:20,910
элементов в нашем файле шаблона там.

29
00:02:20,910 --> 00:02:25,530
Таким образом, в этом подходе класс компонентов имеет немедленный

30
00:02:25,530 --> 00:02:30,390
доступ как к модели данных, так и к структуре управления формой и поэтому

31
00:02:30,390 --> 00:02:36,575
мы можем затем взять модель данных и нажать ее в структуру управления формой и

32
00:02:36,575 --> 00:02:40,985
соответственно взять информацию из структуры управления формы и

33
00:02:40,985 --> 00:02:43,355
затем сопоставьте его с моделью данных.

34
00:02:43,355 --> 00:02:48,355
Таким образом, модель данных, поступающая из задней части, может быть отображена в форме

35
00:02:48,355 --> 00:02:53,410
структуры управления, которая отражается в представлении через этот шаблон

36
00:02:54,550 --> 00:02:58,280
и мост между ними делается в классе компонентов

37
00:02:58,280 --> 00:03:02,660
путем создания структуры формы внутри класса компонента.

38
00:03:02,660 --> 00:03:07,330
Теперь это не имеет большого смысла для вас в данный момент, но

39
00:03:07,330 --> 00:03:12,230
, когда мы выполняем упражнение, станет еще более понятным для вас, как эта привязка

40
00:03:12,230 --> 00:03:17,080
между моделью данных и структурой управления фирмы может быть выполнена

41
00:03:17,080 --> 00:03:22,185
внутри класса компонента в коде сценария типа класса компонентов.

42
00:03:22,185 --> 00:03:26,700
Так вот, где мы будем использовать реактивные шаблоны, тестирование и валидацию

43
00:03:26,700 --> 00:03:31,160
с большим преимуществом, поэтому этот подход reactive

44
00:03:31,160 --> 00:03:35,170
поддерживает реактивные шаблоны программирования, как я уже сказал, мы поговорим

45
00:03:35,170 --> 00:03:39,880
более реактивное программирование немного позже в этом модуле.

46
00:03:40,900 --> 00:03:45,470
Также тот факт, что мы создаем формы в коде

47
00:03:45,470 --> 00:03:50,840
, означает, что тестирование и оценка форм становится намного проще.

48
00:03:50,840 --> 00:03:54,040
Шаблонные формы очень трудно проверить

49
00:03:54,040 --> 00:03:58,770
, потому что большая часть структуры находится в коде шаблона, поэтому

50
00:03:58,770 --> 00:04:03,800
реактивный подход подходит гораздо лучше для модульного тестирования и

51
00:04:03,800 --> 00:04:10,150
также для проверки формы, как мы увидим немного позже в упражнении.

52
00:04:10,150 --> 00:04:15,650
Давайте кратко рассмотрим некоторые из преимуществ использования реактивных форм.

53
00:04:15,650 --> 00:04:20,820
Одним из преимуществ является то, что значения в том виде, в котором элементы

54
00:04:20,820 --> 00:04:25,986
сразу доступны и синхронны с абстрактным кодом.

55
00:04:25,986 --> 00:04:29,990
В шаблоне управляемой форме он принимает на цикл для

56
00:04:29,990 --> 00:04:35,510
любые изменения, написанные шаблон, чтобы отразить в вашем коде там,

57
00:04:35,510 --> 00:04:40,990
, но в реактивном подходе, синхронный бит, данные и

58
00:04:40,990 --> 00:04:46,491
вид плотно поддерживается.

59
00:04:46,491 --> 00:04:50,680
Во-вторых, реактивные формы, как я уже упоминал,

60
00:04:50,680 --> 00:04:55,560
легче делать модульное тестирование, и это становится очень важным

61
00:04:55,560 --> 00:05:01,240
, когда вы разрабатываете очень сложную репликацию угла.

62
00:05:01,240 --> 00:05:04,320
Реактивные формы поддерживаются для некоторых классов

63
00:05:04,320 --> 00:05:08,240
, доступных для библиотеки угловых форм.

64
00:05:08,240 --> 00:05:13,390
Одним из них является класс FormControl, который управляет индивидуальной формой управления

65
00:05:13,390 --> 00:05:19,350
, что мы включаем в нашу форму отдельные элементы, а также позволяет нам

66
00:05:19,350 --> 00:05:24,360
отслеживать значение этих ограничений и выполнять проверку этих элементов.

67
00:05:25,500 --> 00:05:29,110
FormGroup представляет собой группу FormControl, поэтому

68
00:05:29,110 --> 00:05:32,420
, если вы хотите организовать FormControls вместе как группу, а затем

69
00:05:32,420 --> 00:05:37,700
отслеживать информацию об этой группе в целом, то FormGroup

70
00:05:37,700 --> 00:05:43,240
позволяет агломерации группы FormControls вместе.

71
00:05:44,780 --> 00:05:48,850
Кроме того, у нас также есть класс AbstractControl, который является абстрактным

72
00:05:48,850 --> 00:05:53,930
класс для классов FormControl, который также может быть использован в наших интересах

73
00:05:53,930 --> 00:05:58,500
, хотя мы хотим увидеть их конкретно в упражнении позже,

74
00:05:58,500 --> 00:06:02,630
, но мы вернемся, чтобы использовать их позже.

75
00:06:05,600 --> 00:06:10,430
А также у нас есть класс FormArray, который позволяет определить

76
00:06:10,430 --> 00:06:15,410
число-индексированный массив экземпляров AbstractControl,

77
00:06:15,410 --> 00:06:19,460
снова, как AbstractControl, так и FormArray, мы не будем явно рассматривать

78
00:06:19,460 --> 00:06:24,950
в этом конкретном уроке, но мы увидим их позже в курсе.

79
00:06:24,950 --> 00:06:28,070
Еще одним интересным аспектом реактивных форм

80
00:06:28,070 --> 00:06:29,950
является наличие FormBuilder.

81
00:06:29,950 --> 00:06:36,925
Класс FormBuilder позволяет использовать для создания форм в нашем коде TypeScript и

82
00:06:36,925 --> 00:06:42,115
затем иметь возможность связать их с этим шаблоном элементов управления там.

83
00:06:42,115 --> 00:06:47,218
Таким образом, чтобы использовать класс Form Builder, вы импортируете Form Builder из угловых форм

84
00:06:47,218 --> 00:06:52,483
, а затем после того, как вы можете использовать компоновщик форм для построения формы,

85
00:06:52,483 --> 00:06:57,424
, как если вы используете и делаете то, что ваши классы конвертера форм и группы форм

86
00:06:57,424 --> 00:07:03,040
классы, как мы видели на предыдущем слайде, что код немного сложнее.

87
00:07:03,040 --> 00:07:08,180
Но используя класс FormBuilder, он уменьшает повторяемость инклитического в вашем коде

88
00:07:08,180 --> 00:07:13,610
и делает его намного более компактным для определения шрифтов.

89
00:07:13,610 --> 00:07:16,440
Мы будем использовать класс FormBuilder в качестве подхода к построению форм

90
00:07:16,440 --> 00:07:19,760
в следующем упражнении и

91
00:07:19,760 --> 00:07:26,170
этот пример получен из упражнения, которое вы будете делать сразу после этой лекции.

92
00:07:26,170 --> 00:07:31,320
Таким образом, здесь вы можете видеть, что мы создали форму, как группа этих форм управления

93
00:07:31,320 --> 00:07:39,100
элементов и каждый из них имеет определенное имя, а также значение, данное им.

94
00:07:39,100 --> 00:07:43,540
Создавая модель формы в нашем машинописном коде,

95
00:07:43,540 --> 00:07:48,030
вы не заполняете автоматически модель формы, вам нужно исключительно заполнить

96
00:07:48,030 --> 00:07:51,190
модель формы, особенно если вы получаете данные в модели данных,

97
00:07:51,190 --> 00:07:55,280
тогда модель данных должна быть сопоставлена в модель формы, чтобы заполнить значения,

98
00:07:55,280 --> 00:08:00,580
, поэтому модель формы и модель данных хранятся отдельно в реактивных формах.

99
00:08:00,580 --> 00:08:05,340
В шаблонах управляемых форм вы видели, что мы непосредственно пытаемся в данные

100
00:08:05,340 --> 00:08:09,990
объектов из файла шаблона в наш абстрактный код.

101
00:08:09,990 --> 00:08:12,710
Таким образом, в этом случае форма и модель данных хранятся отдельно, поэтому

102
00:08:12,710 --> 00:08:17,610
любые изменения, которые вы вносите в элементы DOM

103
00:08:17,610 --> 00:08:22,660
в вашей форме, будут перетекать в модель формы и

104
00:08:22,660 --> 00:08:28,030
вы должны явно отражать данные формы обратно к

105
00:08:28,030 --> 00:08:33,670
, что модель данных даже через сервис или любые средства, которые вы выбираете,

106
00:08:33,670 --> 00:08:39,240
, поэтому это разделение помогает нам разработать наш код намного лучше, как мы увидим позже.

107
00:08:40,520 --> 00:08:45,490
Для заполнения модели формы из модели данных доступны два метода.

108
00:08:45,490 --> 00:08:50,280
У нас есть метод setValue (), который позволяет нам назначать каждый элемент управления формой

109
00:08:50,280 --> 00:08:54,710
определенному значению из модели данных или у нас есть patchValue (),

110
00:08:54,710 --> 00:08:59,360
, который позволяет обновлять только некоторые элементы управления в вашей модели формы.

111
00:08:59,360 --> 00:09:02,970
Таким образом, как только вы получите модель данных из задней части, из модели данных,

112
00:09:02,970 --> 00:09:08,030
вы можете паткнуть значения в свою модель формы или сопоставить значения из

113
00:09:08,030 --> 00:09:13,130
вашей модели данных в вашу модель формы, очень часто, мы создадим модель данных,

114
00:09:13,130 --> 00:09:18,740
, которая достаточно близко отражает структуру формы.

115
00:09:18,740 --> 00:09:22,060
В следующем упражнении вы увидите, что у меня есть модель данных

116
00:09:22,060 --> 00:09:24,210
, которая основана на классе,

117
00:09:24,210 --> 00:09:30,030
, который очень близко отражает модель формы, которую мы используем в нашем примере там.

118
00:09:31,740 --> 00:09:38,263
С этим быстрым пониманием реактивных форм, давайте теперь перейдем к упражнению

119
00:09:38,263 --> 00:09:43,880
, где мы удвоим реактивную форму в рамках нашего углового приложения и

120
00:09:43,880 --> 00:09:47,958
по пути консолидации некоторых терминологии и

121
00:09:47,958 --> 00:09:52,866
также некоторые из идей, которые мы только что изучили в этом уроке.

122
00:09:52,866 --> 00:09:59,009
[МУЗЫКА]