1
00:00:03,550 --> 00:00:08,265
С кратким пониманием угловых реактивных форм,

2
00:00:08,265 --> 00:00:10,670
давайте перейдем к следующему упражнению.

3
00:00:10,670 --> 00:00:12,800
В этом упражнении мы построим

4
00:00:12,800 --> 00:00:18,705
угловую реактивную форму в угловом приложении, над которым мы работали до сих пор.

5
00:00:18,705 --> 00:00:25,480
По пути мы укрепим наше понимание угловых реактивных форм.

6
00:00:25,480 --> 00:00:28,435
Чтобы начать упражнение,

7
00:00:28,435 --> 00:00:31,560
самый первый шаг, который нам нужно сделать, это импортировать

8
00:00:31,560 --> 00:00:35,860
модуль угловых реактивных форм в наш модуль приложения.

9
00:00:35,860 --> 00:00:38,020
Итак, давайте перейдем к модулю приложения

10
00:00:38,020 --> 00:00:42,160
, а затем мы видим, что мы уже импортировали модуль форм ранее.

11
00:00:42,160 --> 00:00:46,540
Мы также импортируем модуль угловых реактивных форм.

12
00:00:46,540 --> 00:00:49,145
Итак, я собираюсь скопировать это, вставить это здесь,

13
00:00:49,145 --> 00:00:53,810
, а затем изменить это на модуль Angular Reactive Forms.

14
00:00:53,810 --> 00:00:57,770
После этого мы также должны включить это в наш декоратор.

15
00:00:57,770 --> 00:01:00,440
Итак, спускаясь к декоратору здесь,

16
00:01:00,440 --> 00:01:05,235
я собираюсь импортировать модуль Reactive forms в декоратор.

17
00:01:05,235 --> 00:01:09,365
Два других модуля, которые нам нужно импортировать для

18
00:01:09,365 --> 00:01:14,245
нашей формы является MatSelectModule и MatSlideToggleModule.

19
00:01:14,245 --> 00:01:19,035
Модуль выбора позволяет нам использовать элемент выбора,

20
00:01:19,035 --> 00:01:24,360
и SlideToggle позволяет нам использовать переключатель слайда в нашей форме.

21
00:01:24,360 --> 00:01:26,750
Итак, чтобы сделать это, мы будем вводить

22
00:01:26,750 --> 00:01:35,670
импорт MatSelectModule из угловой/материал/выбрать,

23
00:01:36,890 --> 00:01:45,220
и импортировать MatSlideToggleModule из угловой/материал/слайд-переключения,

24
00:01:47,110 --> 00:01:55,195
, а затем нам нужно добавить их в наш декоратор nGModel в импорте.

25
00:01:55,195 --> 00:01:57,145
Итак, идя туда,

26
00:01:57,145 --> 00:02:02,840
позвольте мне импортировать MatSelectModule и MatSlideToggleModule там.

27
00:02:02,840 --> 00:02:04,685
Таким образом, с этими изменениями

28
00:02:04,685 --> 00:02:08,240
наш модуль приложения теперь готов дать нам возможность

29
00:02:08,240 --> 00:02:13,465
использовать модуль Reactive forms в нашем приложении.

30
00:02:13,465 --> 00:02:14,920
На следующем шаге

31
00:02:14,920 --> 00:02:22,105
, что я собираюсь сделать, это создать класс здесь под названием «Обратная связь».

32
00:02:22,105 --> 00:02:28,265
Итак, я создам его в общей папке в файле feedback.ts.

33
00:02:28,265 --> 00:02:34,790
Теперь это структура класса, который представляет

34
00:02:34,790 --> 00:02:38,210
модель данных, соответствующую модели формы, которую мы собираемся использовать

35
00:02:38,210 --> 00:02:41,840
в нашем угловом приложении.

36
00:02:41,840 --> 00:02:50,620
Итак, я создаю класс с именем feedback.

37
00:02:51,210 --> 00:02:53,500
В классе Feedback

38
00:02:53,500 --> 00:02:57,160
я собираюсь включить несколько свойств;

39
00:02:57,970 --> 00:03:02,830
имя, фамилия,

40
00:03:02,830 --> 00:03:10,730
затем номер телефона, Telnum, email,

41
00:03:10,730 --> 00:03:20,440
, то я согласен, что является логической переменной,

42
00:03:20,440 --> 00:03:28,385
логическое свойство, contactttype, который имеет тип строки.

43
00:03:28,385 --> 00:03:31,730
Вам станет яснее, почему я включаю все

44
00:03:31,730 --> 00:03:36,145
, когда мы смотрим на сам дизайн формы.

45
00:03:36,145 --> 00:03:42,350
Этот класс обратной связи соответствует отзывам, которые

46
00:03:42,350 --> 00:03:48,045
пользователь может отправить о нашем ресторане в рамках приложения Angular.

47
00:03:48,045 --> 00:03:51,800
Итак, это причина, по которой я создаю этот класс отзывов.

48
00:03:51,800 --> 00:03:55,865
Мы собираемся отобразить это в модели формы в

49
00:03:55,865 --> 00:04:00,650
один из компонентов там, а также вместе с этим,

50
00:04:00,650 --> 00:04:05,920
я экспортирую константу, которая является строковым массивом под названием

51
00:04:05,920 --> 00:04:12,380
contactttype, который, как я упомянул

52
00:04:12,380 --> 00:04:19,410
, является строковым массивом, содержащим три строки здесь,

53
00:04:25,060 --> 00:04:29,460
none, Tel и email.

54
00:04:29,750 --> 00:04:34,875
Итак, теперь наша структура модели данных готова.

55
00:04:34,875 --> 00:04:39,019
Итак, позже, когда мы разрабатываем нашу серверную сторону,

56
00:04:39,019 --> 00:04:45,555
мы сможем сопоставить это с данными, которые мы храним на стороне сервера.

57
00:04:45,555 --> 00:04:47,690
Итак, в рамках нашего углового приложения,

58
00:04:47,690 --> 00:04:53,705
это формирует модель данных, которую мы собираемся использовать для нашего приложения так же, как блюдо,

59
00:04:53,705 --> 00:04:58,850
лидер, и продвижение, которое мы разработали, это еще один класс, который

60
00:04:58,850 --> 00:05:04,375
позволяет нам группировать вместе набор свойств в класс здесь.

61
00:05:04,375 --> 00:05:06,380
Итак, как только мы закончим это,

62
00:05:06,380 --> 00:05:10,365
давайте приступим к созданию формы Reactive.

63
00:05:10,365 --> 00:05:16,095
Мы создадим форму Reactive в нашем контактном компоненте.

64
00:05:16,095 --> 00:05:20,780
Итак, давайте перейдем к контактному файлу component.ts,

65
00:05:20,780 --> 00:05:22,520
, а также мы собираемся включить

66
00:05:22,520 --> 00:05:26,400
соответствующую форму в файл шаблона компонентов контакта.

67
00:05:26,400 --> 00:05:29,475
Итак, в файле скрипта типа контактных компонентов

68
00:05:29,475 --> 00:05:32,135
, так что это то, где мы собираемся подготовить нашу форму

69
00:05:32,135 --> 00:05:35,555
, как мы видели, что форма Reactive построена в основном

70
00:05:35,555 --> 00:05:43,265
в коде, а затем сопоставляется с элементами формы в файле шаблона.

71
00:05:43,265 --> 00:05:49,360
Итак, здесь я собираюсь импортировать несколько классов.

72
00:05:49,360 --> 00:05:52,655
Я импортирую FormBuilder,

73
00:05:52,655 --> 00:06:00,055
затем FormBuilder и валидаторы.

74
00:06:00,055 --> 00:06:05,890
Validators будут использоваться для проверки формы, которая будет в следующем упражнении,

75
00:06:05,890 --> 00:06:10,125
, но я импортирую их уже на данный момент.

76
00:06:10,125 --> 00:06:15,735
Они импортируются из библиотеки угловых форм.

77
00:06:15,735 --> 00:06:19,300
Итак, как только мы импортируем это,

78
00:06:19,300 --> 00:06:29,790
мы будем импортировать класс Feedback и константу contactttype

79
00:06:29,790 --> 00:06:38,360
из файла/обратной связи

80
00:06:38,360 --> 00:06:41,415
, который мы только что создали на предыдущем шаге.

81
00:06:41,415 --> 00:06:44,850
Нам это нужно в нашем приложении.

82
00:06:44,850 --> 00:06:49,455
Теперь, внутри моего класса здесь,

83
00:06:49,455 --> 00:07:00,310
я собираюсь объявить несколько переменных, называемых feedbackForm, которые имеют тип FormGroup.

84
00:07:00,410 --> 00:07:07,475
Это модель формы, которая собирается принять

85
00:07:07,475 --> 00:07:11,960
Реактивная форма здесь, а затем я также

86
00:07:11,960 --> 00:07:17,270
объявить переменную обратную связь типа Обратная связь,

87
00:07:17,270 --> 00:07:19,745
, так что это будет соответствующая модель данных.

88
00:07:19,745 --> 00:07:27,930
Позже это значение обратной связи может быть извлечено с сервера в нашем приложении

89
00:07:27,930 --> 00:07:34,205
, а затем я также объявлю contactttype как переменную

90
00:07:34,205 --> 00:07:41,045
, которая является строковым массивом contactttype.

91
00:07:41,045 --> 00:07:44,860
Потому что мне нужно использовать это в нашем приложении.

92
00:07:44,860 --> 00:07:48,675
Чтобы построить Reactive форму внутри конструктора,

93
00:07:48,675 --> 00:07:58,605
я бы ввёл FormBuilder в конструктор здесь,

94
00:07:58,605 --> 00:08:03,605
, и я бы создал отдельный метод под названием

95
00:08:03,605 --> 00:08:08,950
createForm, который я буду вызывать внутри конструктора,

96
00:08:08,950 --> 00:08:12,300
, поэтому, когда этот класс будет построен, форма будет создана.

97
00:08:12,300 --> 00:08:17,870
Таким образом, createForm будет методом, в рамках которого я создаю фактическую форму.

98
00:08:17,870 --> 00:08:24,060
Итак, позвольте мне добавить метод createForm здесь.

99
00:08:24,060 --> 00:08:27,590
Это просто удобство, я мог бы просто

100
00:08:27,590 --> 00:08:31,250
включил код непосредственно в сам конструктор,

101
00:08:31,250 --> 00:08:34,760
, но вы увидите, что могут быть причины, по которым вам

102
00:08:34,760 --> 00:08:41,060
может понадобиться вызвать этот createForm из других мест.

103
00:08:41,060 --> 00:08:47,240
Итак, лучше поместить его в отдельный метод здесь.

104
00:08:47,240 --> 00:08:50,830
Итак, я создам форму здесь, Reactive form,

105
00:08:50,830 --> 00:08:56,775
, а затем поместим ее в переменную feedbackForm, которую я объявил ранее.

106
00:08:56,775 --> 00:08:58,335
Итак, чтобы создать форму,

107
00:08:58,335 --> 00:09:02,215
я собираюсь воспользоваться помощью FormBuilder,

108
00:09:02,215 --> 00:09:05,145
FB, который я объявил в конструкторе,

109
00:09:05,145 --> 00:09:10,760
, а затем FB предоставляет метод под названием Group, который позволяет мне

110
00:09:10,760 --> 00:09:16,910
определить группу, FormGroup здесь.

111
00:09:16,910 --> 00:09:23,040
Итак, внутри, теперь я собираюсь построить части формы там.

112
00:09:23,040 --> 00:09:24,845
Итак, в этой группе

113
00:09:24,845 --> 00:09:28,775
теперь я могу включить различные элементы управления формы там.

114
00:09:28,775 --> 00:09:34,050
Итак, я бы сначала поставил имя,

115
00:09:34,050 --> 00:09:44,200
затем фамилию.

116
00:09:45,910 --> 00:09:51,175
Обратите внимание, как поля в моей форме

117
00:09:51,175 --> 00:09:56,460
тесно дублируют поля в моем классе обратной связи.

118
00:09:56,460 --> 00:09:59,790
Они не должны точно совпадать, но если они совпадают,

119
00:09:59,790 --> 00:10:01,630
то передача данных между

120
00:10:01,630 --> 00:10:06,550
модели данных и четырьмя моделями становится намного более простой.

121
00:10:06,550 --> 00:10:12,500
Telnum, который я собираюсь оставить, потому что uh-

122
00:10:13,040 --> 00:10:15,800
Я добавил имя, фамилию,

123
00:10:15,800 --> 00:10:25,140
Telnum, электронную почту, и согласен, и тип контакта,

124
00:10:25,550 --> 00:10:31,360
, который я буду устанавливать как нет, чтобы начать с.

125
00:10:31,360 --> 00:10:35,710
Вспомните, что тип контакта представляет собой массив строк, содержащий три из них

126
00:10:35,710 --> 00:10:40,015
, поэтому вы должны выбрать один из них, а затем сопоставить его с этим свойством здесь.

127
00:10:40,015 --> 00:10:44,920
Итак, я выберу это как none, а затем сообщение,

128
00:10:44,920 --> 00:10:49,120
которое будет обратная связь, которую пользователь дает о

129
00:10:49,120 --> 00:10:53,605
наш ресторан, сопоставленный в строку здесь.

130
00:10:53,605 --> 00:10:59,765
Итак, это различные области, которые станут частью нашей формы здесь.

131
00:10:59,765 --> 00:11:04,370
Итак, как только у нас есть структура формы на месте здесь,

132
00:11:04,370 --> 00:11:07,525
так что вы заметите, что когда этот метод вызывается,

133
00:11:07,525 --> 00:11:12,455
эта форма будет реактивная форма будет создана в коде здесь.

134
00:11:12,455 --> 00:11:16,595
Теперь нам нужно сопоставить это в виде,

135
00:11:16,595 --> 00:11:17,900
в шаблон там.

136
00:11:17,900 --> 00:11:21,470
Итак, мы сделаем это на следующем шаге.

137
00:11:21,470 --> 00:11:26,130
Итак, теперь, перейдя к нашему файлу шаблона,

138
00:11:26,130 --> 00:11:31,415
в файле шаблона компонента контакта,

139
00:11:31,415 --> 00:11:36,159
мы прокрутим вниз, а затем включим это в

140
00:11:36,159 --> 00:11:42,910
наш файл шаблона сразу после этого div здесь,

141
00:11:42,910 --> 00:11:50,325
, поэтому у нас есть этот div в нашем представлении контактов, который содержит информацию о местоположении и так далее.

142
00:11:50,325 --> 00:11:54,510
Сразу после этого я собираюсь создать еще один div внутри

143
00:11:54,510 --> 00:11:59,820
, который мы разместим там реактивную форму.

144
00:11:59,820 --> 00:12:17,720
Позвольте мне применить несколько гибких макетов

145
00:12:17,720 --> 00:12:19,100
здесь к моему div.

146
00:12:19,100 --> 00:12:22,110
Теперь этот размер формы, как вы можете видеть, должен быть

147
00:12:22,110 --> 00:12:25,905
классом CSS, который я создаю немного позже.

148
00:12:25,905 --> 00:12:31,540
Внутри этого div, я собираюсь разместить свою форму.

149
00:12:31,540 --> 00:12:36,680
Итак, как только я поместил этот div в свой файл шаблона,

150
00:12:36,680 --> 00:12:40,180
теперь позвольте мне начать с заголовка для этого.

151
00:12:40,180 --> 00:12:47,675
Итак, мы скажем: «Пришлите нам свой отзыв».

152
00:12:47,675 --> 00:12:54,250
Итак, вы ищете отзывы от посетителей вашего сайта.

153
00:12:54,950 --> 00:12:58,050
Мы начнем строить форму.

154
00:12:58,050 --> 00:13:03,200
Итак, позвольте мне начать с тега формы

155
00:13:03,200 --> 00:13:08,275
здесь, а затем мы построим форму внутри этого тега формы здесь.

156
00:13:08,275 --> 00:13:12,180
Итак, для формы, первое, что я сделаю, это применить

157
00:13:12,180 --> 00:13:16,535
no validate, потому что проверка будет позаботиться угловой,

158
00:13:16,535 --> 00:13:21,380
, а затем также применить группу форм здесь.

159
00:13:21,380 --> 00:13:38,060
Итак, обратите внимание, что эта группа форм - та, которая свяжет меня с реактивной моделью формы

160
00:13:38,060 --> 00:13:40,555
, которую я создал в своем коде здесь.

161
00:13:40,555 --> 00:13:42,380
Итак, делая это,

162
00:13:42,380 --> 00:13:47,255
мы привязываем в этой реактивной форме в шаблоне к

163
00:13:47,255 --> 00:13:53,680
соответствующей модели формы в нашем файле машинописного текста там.

164
00:13:53,680 --> 00:13:59,100
Итак, как мы это делаем, мы объявляем группу форм и форму обратной связи.

165
00:13:59,100 --> 00:14:00,910
Я покажу вам, как вы свяжите в

166
00:14:00,910 --> 00:14:04,840
оставшиеся элементы формы с

167
00:14:04,840 --> 00:14:09,315
соответствующие свойства в модели формы за короткое время.

168
00:14:09,315 --> 00:14:11,325
Итак, после того, как мы сделаем это,

169
00:14:11,325 --> 00:14:20,480
давайте поставим в нашей форме элементы на место внутри этой модели формы.

170
00:14:20,480 --> 00:14:24,490
Итак, я объявлю P здесь, а затем внутри я

171
00:14:24,490 --> 00:14:28,860
буду использовать поле mat-form здесь,

172
00:14:28,860 --> 00:14:35,475
, к которому я буду применять класс CSS под названием Half-width,

173
00:14:35,475 --> 00:14:39,600
и закрыть это.

174
00:14:39,600 --> 00:14:45,195
Таким образом, это поставило бы мой первый элемент управления формой на место здесь.

175
00:14:45,195 --> 00:14:55,930
Итак, здесь, я поместим вход, а затем применим MatInput из углового материала здесь.

176
00:14:56,930 --> 00:15:03,530
Чтобы связать это с свойством внутри моей модели формы,

177
00:15:03,530 --> 00:15:08,630
мне нужно было бы сделать FormControlName,

178
00:15:09,980 --> 00:15:14,650
, а первый - имя.

179
00:15:14,650 --> 00:15:20,370
Таким образом, этот вход теперь привязан к свойству первого имени

180
00:15:20,370 --> 00:15:26,015
, которое я определил внутри моей модели формы, которую я определил в коде.

181
00:15:26,015 --> 00:15:29,680
Имя, а затем я определяю

182
00:15:29,680 --> 00:15:37,900
заполнитель как имя.

183
00:15:37,900 --> 00:15:39,970
Итак, как вы и ожидали,

184
00:15:39,970 --> 00:15:43,685
это поле ввода будет использоваться для ввода в

185
00:15:43,685 --> 00:15:51,215
имя пользователя, введите текст.

186
00:15:51,215 --> 00:15:56,935
Интересно, что вы видите, что у нас нет ng-модели здесь

187
00:15:56,935 --> 00:16:02,950
или любой из переменных шаблона и так далее в моей форме больше.

188
00:16:02,950 --> 00:16:05,945
Реактивные формы действуют по-разному.

189
00:16:05,945 --> 00:16:08,480
Итак, как вы видите в реактивных формах,

190
00:16:08,480 --> 00:16:11,975
вы сопоставите группу форм, а затем попробуйте имена элементов управления формой.

191
00:16:11,975 --> 00:16:16,095
Если вы создаете элементы управления формы с классом управления формой,

192
00:16:16,095 --> 00:16:20,440
вы объявите это как элемент управления формой в квадратных скобках, а затем сопоставите

193
00:16:20,440 --> 00:16:24,910
с соответствующим элементом управления формой, который вы создаете в своем скептическом типе.

194
00:16:24,910 --> 00:16:28,940
Но теперь, поскольку мы используем компоновщик форм,

195
00:16:28,940 --> 00:16:33,280
мне нужно только связать в группе форм, как

196
00:16:33,280 --> 00:16:38,605
это в моей форме к соответствующей модели формы,

197
00:16:38,605 --> 00:16:39,890
, а затем остальные из них,

198
00:16:39,890 --> 00:16:42,690
я объявляю как имя элемента управления формы, а затем сопоставляю их, чтобы

199
00:16:42,690 --> 00:16:45,085
соответствующие свойства в

200
00:16:45,085 --> 00:16:48,995
элемент управления формой модель, которую у меня есть в моем машинописном коде.

201
00:16:48,995 --> 00:16:53,950
Таким образом, это создаст там первое поле имени.

202
00:16:53,950 --> 00:16:56,400
Позвольте мне скопировать это.

203
00:16:56,400 --> 00:17:00,150
Мне нужна фамилия.

204
00:17:00,150 --> 00:17:07,005
Итак, я собираюсь скопировать это, а затем сказать, что имя элемента управления формы - Фамилия,

205
00:17:07,005 --> 00:17:10,510
и заполнитель - Фамилия,

206
00:17:10,510 --> 00:17:12,550
и тип, Текст, здесь.

207
00:17:12,550 --> 00:17:18,975
У меня было имя,

208
00:17:18,975 --> 00:17:24,970
У меня была фамилия, и если вы посмотрите на модель управления формой,

209
00:17:24,970 --> 00:17:27,400
вы увидите, что после имени и фамилии,

210
00:17:27,400 --> 00:17:31,770
У меня есть номер телефона в качестве следующего,

211
00:17:31,770 --> 00:17:34,325
, поэтому я собираюсь вставить это здесь.

212
00:17:34,325 --> 00:17:38,390
Затем имя элемента управления формы здесь Telnum,

213
00:17:38,390 --> 00:17:46,920
и заполнитель номер телефона,

214
00:17:46,920 --> 00:17:51,405
и тип Тел.

215
00:17:51,405 --> 00:17:53,385
Пока мы на нем,

216
00:17:53,385 --> 00:17:59,905
Я буду привязывать в обязательном к этим, хотя это не требуется.

217
00:17:59,905 --> 00:18:08,275
Но позвольте мне добавить это.

218
00:18:08,275 --> 00:18:11,920
Теперь, номер телефона, тогда у меня есть электронная почта.

219
00:18:11,920 --> 00:18:20,679
Итак, следующее поле Email,

220
00:18:25,520 --> 00:18:32,100
и заполнитель Email,

221
00:18:32,100 --> 00:18:35,510
и тип также.

222
00:18:35,510 --> 00:18:38,600
Итак, теперь у меня есть имя,

223
00:18:38,600 --> 00:18:41,610
фамилия, номер телефона и электронная почта.

224
00:18:41,610 --> 00:18:52,820
Следующая вещь, которую я собираюсь добавить, это переключение слайдов.

225
00:18:53,850 --> 00:18:56,600
Раньше мы используем чекбокс.

226
00:18:56,600 --> 00:19:03,240
Slidetoggle - это еще один элемент управления формы, который обеспечивает угловой материал,

227
00:19:03,240 --> 00:19:07,150
, который несколько отличается от флажка и

228
00:19:07,150 --> 00:19:11,480
Я думал, что я проиллюстрирую вам, используя его в форме здесь.

229
00:19:11,480 --> 00:19:18,680
Теперь, здесь я буду использовать таблицу для позиционирования этих элементов.

230
00:19:19,890 --> 00:19:22,300
Причина в том, что

231
00:19:22,300 --> 00:19:25,520
эти элементы трудно позиционировать без использования таблицы.

232
00:19:25,520 --> 00:19:27,605
Итак, внутри таблицы

233
00:19:27,605 --> 00:19:31,740
я уверен, что вы все знаете, как использовать таблицу,

234
00:19:35,280 --> 00:19:39,740
Я попытался расположить их, используя стандартный макет

235
00:19:39,740 --> 00:19:44,970
и не был очень успешным с этим.

236
00:19:44,970 --> 00:19:50,510
Поэтому вместо этого я прибег к использованию таблицы, чтобы разместить эти два элемента в моей форме.

237
00:19:50,510 --> 00:19:54,350
Итак, мат-слайд-тумблер.

238
00:19:54,350 --> 00:19:57,680
Итак, слайд-переключатель похож на флажок,

239
00:19:57,680 --> 00:20:00,390
вы можете включить и выключить его,

240
00:20:00,390 --> 00:20:04,550
и это разрешено для выбора логического значения здесь.

241
00:20:04,550 --> 00:20:14,200
Итак, слайд-переключение и formControlName согласны.

242
00:20:14,200 --> 00:20:16,140
Если вы помните, мы согласились,

243
00:20:16,140 --> 00:20:22,925
, который был булевым свойством в элементе управления формой.

244
00:20:22,925 --> 00:20:25,735
Тогда, для этого, я бы сказал,

245
00:20:25,735 --> 00:20:29,340
можем ли мы связаться с вами?

246
00:20:29,340 --> 00:20:35,140
Теперь вам станет яснее, когда вы увидите окончательную версию

247
00:20:35,140 --> 00:20:43,060
этой формы, чтобы понять, почему мы это делаем.

248
00:20:43,060 --> 00:20:49,895
Прямо сейчас, мы просто вложим все части в мою реакционную форму здесь.

249
00:20:49,895 --> 00:20:55,925
Во второй части я собираюсь использовать select,

250
00:20:55,925 --> 00:21:03,920
, который поддерживается через компонент mat-select в угловом материале.

251
00:21:03,920 --> 00:21:12,460
Итак, MD выберите и для этого заполнитель,

252
00:21:13,520 --> 00:21:21,690
я буду определять как «Как?»,

253
00:21:21,690 --> 00:21:27,580
и formControlName, с которыми я собираюсь связать это

254
00:21:27,580 --> 00:21:37,650
«contactttype» и закрыть выбор MD.

255
00:21:37,650 --> 00:21:41,720
Таким образом, это позволяет мне создать элемент select в моей форме.

256
00:21:41,720 --> 00:21:44,660
Итак, элемент select - это то, что дает мне

257
00:21:44,660 --> 00:21:48,535
выпадающий список, из которого я могу выбрать один из них.

258
00:21:48,535 --> 00:21:50,905
Итак, чтобы создать выпадающий список,

259
00:21:50,905 --> 00:22:00,510
я собираюсь использовать опцию мат, которая доступна в качестве компонента в угловом материале.

260
00:22:00,510 --> 00:22:05,035
Таким образом, матовая опция включена внутри mat-select.

261
00:22:05,035 --> 00:22:06,810
Итак, для варианта,

262
00:22:06,810 --> 00:22:09,570
Я собираюсь сделать*ngFor,

263
00:22:09,570 --> 00:22:17,070
и я уверен, что вы помните директиву ngFor от ранее,

264
00:22:17,070 --> 00:22:24,750
*ngFor «Пусть ctype contactType».

265
00:22:24,750 --> 00:22:28,360
Теперь вы видите, почему я объявил переменную типа контакта

266
00:22:28,360 --> 00:22:44,740
в моем коде раньше, а затем я бы сказал: [value] = «ctype».

267
00:22:44,740 --> 00:23:00,840
Итак, я настраиваю свой вариант в моем выборе здесь и использую интерполяцию,

268
00:23:00,840 --> 00:23:03,040
я буду вводить ctype здесь.

269
00:23:03,040 --> 00:23:10,100
Таким образом, это даст мне раскрывающееся меню вариантов в моей форме там.

270
00:23:10,100 --> 00:23:14,665
Итак, это следующая часть, а затем, наконец,

271
00:23:14,665 --> 00:23:21,270
после таблицы, я собираюсь положить в текстовую область здесь.

272
00:23:21,270 --> 00:23:31,320
Итак, я бы сказал p и закрыть, что P. Для стилизации реактивной формы

273
00:23:31,320 --> 00:23:35,395
элемент P позволяет мне правильно позиционировать элементы.

274
00:23:35,395 --> 00:23:37,580
Так вот почему я использую это.

275
00:23:37,580 --> 00:23:42,380
Итак, как вы помните,

276
00:23:42,540 --> 00:23:48,740
mat-form-field позволяет мне включать контейнер ввода здесь, а затем внутри я собираюсь определить текстовую область,

277
00:23:48,740 --> 00:23:56,239
, которую я применяю

278
00:23:56,239 --> 00:24:08,650
директиву matInput к этому.

279
00:24:08,650 --> 00:24:15,460
Тогда formControlName, я собираюсь дать как «сообщение».

280
00:24:15,460 --> 00:24:23,290
Таким образом, этот конкретный элемент формы позволяет пользователю ввести

281
00:24:23,290 --> 00:24:31,305
в сообщение обратной связи для моего ресторана.

282
00:24:31,305 --> 00:24:37,100
Итак, заполнитель «Your Feedback»,

283
00:24:37,100 --> 00:24:42,610
, а затем я дам текстовой области размер

284
00:24:42,610 --> 00:24:51,245
12 строк здесь, а затем закрыть текстовую область.

285
00:24:51,245 --> 00:24:58,005
Итак, здесь у нас есть текстовая область с 12 строками.

286
00:24:58,005 --> 00:25:03,350
Итак, это завершает большую часть формы.

287
00:25:03,350 --> 00:25:07,910
Извините, это должно быть за столом.

288
00:25:08,070 --> 00:25:11,830
Нам нужна кнопка, чтобы отправить форму.

289
00:25:11,830 --> 00:25:20,755
Итак, прямо там, я включу кнопку типа = «отправить» и

290
00:25:20,755 --> 00:25:24,155
эту кнопку отправки, я применим

291
00:25:24,155 --> 00:25:32,270
матовую кнопку, а также применим класс = «background-primary».

292
00:25:33,600 --> 00:25:42,770
Вы видели, как я применяю это к кнопке в предыдущем упражнении также,

293
00:25:42,770 --> 00:25:45,740
похожий вид кнопки.

294
00:25:45,740 --> 00:25:48,510
Итак, теперь моя форма почти готова.

295
00:25:48,510 --> 00:25:54,455
Вы можете добавить несколько классов CSS в компонент контакта.

296
00:25:54,455 --> 00:25:58,725
Три класса, которые я использовал, - это полная ширина,

297
00:25:58,725 --> 00:26:06,420
это используется для установки размера элементов там.

298
00:26:06,420 --> 00:26:10,980
Итак, полная ширина 95 процентов, половина ширины.

299
00:26:11,200 --> 00:26:17,565
Таким образом, это позволяет мне правильно определять размер элементов,

300
00:26:17,565 --> 00:26:23,930
45% половинной ширины, а затем размер формы.

301
00:26:26,400 --> 00:26:32,740
Итак, я использую эти классы CSS в своей форме.

302
00:26:32,740 --> 00:26:38,230
Таким образом, давайте сохраним изменения,

303
00:26:38,460 --> 00:26:44,150
и быстро посмотрим на форму в нашем заявлении.

304
00:26:44,150 --> 00:26:45,915
Перейдя в браузер,

305
00:26:45,915 --> 00:26:48,725
в представлении контактов,

306
00:26:48,725 --> 00:26:54,210
при прокрутке вниз вы теперь видите форму на месте в представлении контактов здесь.

307
00:26:54,210 --> 00:26:57,660
Итак, вы видите отправить нам свой отзыв,

308
00:26:57,660 --> 00:27:01,985
имя, фамилия, номер телефона,

309
00:27:01,985 --> 00:27:06,695
электронной почты и переключатель слайда здесь,

310
00:27:06,695 --> 00:27:12,395
так вы видите переключатель слайда на месте, а затем это выбор.

311
00:27:12,395 --> 00:27:15,650
Выбор позволяет мне выбрать один из этих трех.

312
00:27:15,650 --> 00:27:20,415
Значение по умолчанию равно none, а затем текстовая область здесь,

313
00:27:20,415 --> 00:27:25,675
позволяет мне вводить комментарии к отзывам здесь, а затем кнопку отправки.

314
00:27:25,675 --> 00:27:28,940
Таким образом, это завершает реактивную форму в

315
00:27:28,940 --> 00:27:32,690
моей заявки, но когда вы нажимаете на кнопку Отправить,

316
00:27:32,690 --> 00:27:35,000
вы не сможете отправить эту форму.

317
00:27:35,000 --> 00:27:39,480
Итак, нам нужно добавить ngSubmit в нашу форму в шаблоне

318
00:27:39,480 --> 00:27:44,485
, а затем добавить метод в наш файл сценария типа.

319
00:27:44,485 --> 00:27:47,185
Перейдя к нашему коду,

320
00:27:47,185 --> 00:27:49,315
к форме здесь,

321
00:27:49,315 --> 00:27:53,830
вместе с формой novalidate FormGroup,

322
00:27:53,830 --> 00:28:01,670
Я собираюсь добавить в ngSubmit в форму.

323
00:28:02,730 --> 00:28:10,025
Я вызову метод как метод onSubmit.

324
00:28:10,025 --> 00:28:14,155
Таким образом, моя форма теперь готова представить информацию.

325
00:28:14,155 --> 00:28:17,195
Мне нужно войти в компоненты контакта, тип файла скрипта

326
00:28:17,195 --> 00:28:25,380
, а затем создать метод onSubmit здесь.

327
00:28:25,380 --> 00:28:28,420
Итак, в методе onSubmit

328
00:28:31,450 --> 00:28:37,030
так бывает, что модель формы точно такая же, как модели данных,

329
00:28:37,030 --> 00:28:45,790
, поэтому я могу просто взять значение модели формы.

330
00:28:45,790 --> 00:28:49,840
Итак, когда у вас есть модель формы, подобная этой форме обратной связи,

331
00:28:49,840 --> 00:28:54,410
форма обратной связи дает свойство, называемое значением,

332
00:28:54,410 --> 00:29:00,020
, которое позволяет мне получить текущее значение всех этих из моей формы обратной связи.

333
00:29:00,020 --> 00:29:03,810
Таким образом, это сформирует объект JavaScript,

334
00:29:03,810 --> 00:29:06,740
, который я затем могу сопоставить в объект JavaScript обратной связи.

335
00:29:06,740 --> 00:29:10,170
Бывает так, что оба из них имеют точно такую же структуру,

336
00:29:10,170 --> 00:29:11,690
модель данных и модель формы.

337
00:29:11,690 --> 00:29:14,140
Итак, вот почему я могу быстро загрузить значение

338
00:29:14,140 --> 00:29:18,120
непосредственно в модель данных, когда пользователь отправляет форму.

339
00:29:18,120 --> 00:29:21,120
Если ваша модель данных несколько отличается от модели формы,

340
00:29:21,120 --> 00:29:24,460
вам нужно явно сопоставить отдельные свойства и

341
00:29:24,460 --> 00:29:28,890
, что может быть сделано внутри этого метода.

342
00:29:29,610 --> 00:29:36,455
Просто чтобы показать вам, что форма отправлена правильно,

343
00:29:36,455 --> 00:29:44,760
Я собираюсь записать значение в консоль, консоль JavaScript.

344
00:29:44,760 --> 00:29:50,200
Тогда я бы сказал, это.feedbackForm.reset.

345
00:29:51,320 --> 00:30:00,405
Метод сброса позволяет сбросить форму в нормальное состояние,

346
00:30:00,405 --> 00:30:03,000
удалив все записи, которые вы сделали в форме.

347
00:30:03,000 --> 00:30:05,480
Итак, как только пользователь отправляет,

348
00:30:05,480 --> 00:30:09,030
вы обычно захватите значения, а затем сбросите форму, чтобы

349
00:30:09,030 --> 00:30:14,365
, что дальнейший ввод может быть сделан в виде отдельной формы.

350
00:30:14,365 --> 00:30:17,450
Так что это метод сброса, который мы будем использовать здесь.

351
00:30:17,450 --> 00:30:19,265
Таким образом, с этими изменениями

352
00:30:19,265 --> 00:30:23,900
давайте сохраним изменения, а затем пойдем и посмотрим нашу форму в действии.

353
00:30:23,900 --> 00:30:30,080
Последняя мелочь, которую я хочу добавить в свой шаблон, это показать

354
00:30:30,080 --> 00:30:36,200
вам значения формы внутри моей формы,

355
00:30:36,200 --> 00:30:38,230
, хотя в реальном приложении

356
00:30:38,230 --> 00:30:42,580
вы не будете делать этого, но я просто хотел проиллюстрировать вам, как

357
00:30:42,580 --> 00:30:47,165
вы можете видеть значения feedbackForm прямо здесь,

358
00:30:47,165 --> 00:30:49,095
из feedbackForm модель.

359
00:30:49,095 --> 00:30:52,395
Итак, я могу сделать внутри.

360
00:30:52,395 --> 00:31:02,625
Я могу сказать feedbackForm.value и проник через json, чтобы показать здесь.

361
00:31:02,625 --> 00:31:08,435
Аналогично, я могу сделать здесь, feedbackForm.

362
00:31:08,435 --> 00:31:15,840
Существует еще одно свойство, связанное с этой моделью формы, называется status,

363
00:31:15,840 --> 00:31:20,440
который показывает мне статус формы в данный момент,

364
00:31:20,440 --> 00:31:22,265
является ли она действительной или недействительной.

365
00:31:22,265 --> 00:31:26,900
Итак, я собираюсь добавить эти два в свою форму здесь,

366
00:31:26,900 --> 00:31:30,285
, чтобы это было показано в моем шаблоне.

367
00:31:30,285 --> 00:31:34,670
Это просто для того, чтобы дать вам мгновенное представление о том, что

368
00:31:34,670 --> 00:31:41,620
модель формы содержит в моем файле сценария типа.

369
00:31:42,460 --> 00:31:47,590
Давайте сохраним изменения и быстро посмотрим на нашу форму.

370
00:31:47,590 --> 00:31:50,325
Возвращаясь к нашему браузеру,

371
00:31:50,325 --> 00:31:55,630
вы можете видеть, что значения формы отображаются

372
00:31:55,630 --> 00:32:04,460
здесь и форма находится в хорошей форме, чтобы позволить нам вводить значения.

373
00:32:04,460 --> 00:32:08,660
Так что давайте набрать некоторые случайные значения здесь, и вы можете

374
00:32:08,660 --> 00:32:14,090
сразу увидеть, что значение отражается в модели feedbackForm там,

375
00:32:14,090 --> 00:32:24,020
справа вверху и по электронной почте.

376
00:32:26,050 --> 00:32:29,295
Неважно, просто введите что-то.

377
00:32:29,295 --> 00:32:31,680
Затем, этот переключатель,

378
00:32:31,680 --> 00:32:34,575
вы можете видеть, что при включении и выключении,

379
00:32:34,575 --> 00:32:39,385
согласие поворот меняется от ложного к true.

380
00:32:39,385 --> 00:32:43,030
Так что позвольте мне оставить его на true, а затем выбрать.

381
00:32:43,030 --> 00:32:50,640
Позвольте мне выбрать электронную почту, а затем вы увидите, что тип контакта здесь изменился на электронную почту.

382
00:32:50,640 --> 00:32:56,060
Итак, вот как вы выбираете, чтобы изменить значение.

383
00:32:56,060 --> 00:33:00,575
Итак, скажем, электронная почта, а затем здесь,

384
00:33:00,575 --> 00:33:01,940
мы можем ввести сообщение.

385
00:33:01,940 --> 00:33:05,960
Некоторый случайный текст здесь, и вы будете

386
00:33:05,960 --> 00:33:10,675
в состоянии увидеть, что случайный текст отражается в сообщении.

387
00:33:10,675 --> 00:33:12,690
Давайте представим форму.

388
00:33:12,690 --> 00:33:16,680
Итак, когда вы нажимаете на Submit вы сразу видите в консоли,

389
00:33:16,680 --> 00:33:20,605
значение печатается здесь,

390
00:33:20,605 --> 00:33:21,870
в этом объекте здесь.

391
00:33:21,870 --> 00:33:27,155
Таким образом, вы можете просмотреть все свойства для этого объекта,

392
00:33:27,155 --> 00:33:31,050
модель формы обратной связи.

393
00:33:31,050 --> 00:33:38,210
Итак, это иллюстрация реактивной формы в нашем приложении.

394
00:33:38,210 --> 00:33:41,850
Это завершает это упражнение.

395
00:33:41,850 --> 00:33:44,800
В этом упражнении мы видели, как мы можем создать

396
00:33:44,800 --> 00:33:47,910
реактивную форму в нашем угловом приложении.

397
00:33:47,910 --> 00:33:52,910
Это также хороший момент, когда вы можете сделать Git commit с сообщением,

398
00:33:52,910 --> 00:33:55,670
reactive образует часть первую.