1
00:00:03,890 --> 00:00:09,395
Мы только что узнали об угловой поддержке форм,

2
00:00:09,395 --> 00:00:12,125
и, в частности, формы, управляемой шаблоном.

3
00:00:12,125 --> 00:00:17,520
В этом упражнении мы создадим форму, управляемую шаблоном, а затем включим эту

4
00:00:17,520 --> 00:00:23,375
в диалог компонента входа, который мы создали в предыдущем упражнении.

5
00:00:23,375 --> 00:00:29,580
В этой лекции форма, управляемая шаблоном, которую мы создаем,

6
00:00:29,580 --> 00:00:34,850
позволяет пользователю ввести свое имя пользователя и пароль в форму входа

7
00:00:34,850 --> 00:00:37,700
, а затем отправить эту информацию в наше приложение.

8
00:00:37,700 --> 00:00:41,825
Теперь, как эта информация обрабатывается на стороне сервера,

9
00:00:41,825 --> 00:00:44,990
, который остается на более позднем курсе.

10
00:00:44,990 --> 00:00:49,310
Но на данный момент у нас есть способ захватить имя пользователя и пароль

11
00:00:49,310 --> 00:00:54,285
, представленные пользователем через шаблон входа формы,

12
00:00:54,285 --> 00:00:58,210
, который мы разработаем в этом упражнении.

13
00:00:58,210 --> 00:01:01,115
Продолвая упражнение,

14
00:01:01,115 --> 00:01:05,030
первым шагом, чтобы иметь возможность использовать

15
00:01:05,030 --> 00:01:08,890
управляемых шаблонами форм, является перейти в app module.ts

16
00:01:08,890 --> 00:01:17,140
файл, а затем импортировать несколько вспомогательных модулей для нашего приложения.

17
00:01:17,140 --> 00:01:20,764
Итак, первое, что я собираюсь импортировать, это

18
00:01:20,764 --> 00:01:33,155
MatFormFieldModule из поля формы материала Angular

19
00:01:33,155 --> 00:01:38,085
.

20
00:01:38,085 --> 00:01:44,600
Таким образом, это позволяет нам группировать кучу элементов в поле формы.

21
00:01:44,600 --> 00:01:52,190
Затем мы также импортируем MatInputModule.

22
00:01:52,190 --> 00:01:58,100
Модуль ввода поддерживает компонент ввода, который представляет собой

23
00:01:58,100 --> 00:02:03,650
стилизованный компонент Angular Material

24
00:02:03,650 --> 00:02:09,690
, который поддерживает поле формы ввода из HTML-форм здесь.

25
00:02:09,690 --> 00:02:15,520
Затем, также, позвольте мне импортировать MatCheckbox,

26
00:02:18,680 --> 00:02:29,895
соответствующий модуль из флажка Angular Material.

27
00:02:29,895 --> 00:02:32,690
Итак, эти три поддерживают

28
00:02:32,690 --> 00:02:36,410
три элемента формы, которые мы будем использовать, когда мы создаем наше приложение.

29
00:02:36,410 --> 00:02:42,420
Модуль поля формы позволяет нам группировать кучу элементов формы там.

30
00:02:42,420 --> 00:02:46,240
Модуль ввода позволяет нам создать поле ввода там.

31
00:02:46,240 --> 00:02:48,460
Модуль Checkbox, как вы и ожидали,

32
00:02:48,460 --> 00:02:50,570
позволяет нам создать флажок.

33
00:02:50,570 --> 00:02:53,670
Кроме того, мне также нужно импортировать

34
00:02:53,670 --> 00:03:06,190
FormsModule из угловых форм.

35
00:03:06,190 --> 00:03:10,130
FormsModule - это тот, который поддерживает формы в угловом.

36
00:03:10,130 --> 00:03:12,445
Это тот, который поддерживает формы, управляемые шаблонами.

37
00:03:12,445 --> 00:03:15,280
Итак, теперь, когда мы импортировали эти, очевидно,

38
00:03:15,280 --> 00:03:23,775
следующий шаг заключается в том, чтобы войти в декоратор NgModule, а затем вытащить их на место здесь.

39
00:03:23,775 --> 00:03:30,560
Итак, мы зайдем сюда, а затем введем FormsModule.

40
00:03:30,660 --> 00:03:38,200
Позвольте мне ввести FormFieldModule,

41
00:03:38,200 --> 00:03:45,075
InputModule, CheckboxModule здесь.

42
00:03:45,075 --> 00:03:49,325
Тогда, теперь мой модуль приложения готов

43
00:03:49,325 --> 00:03:55,125
для поддержки использования шаблонов форм в нашем приложении.

44
00:03:55,125 --> 00:03:57,485
Теперь, когда мы закончили это,

45
00:03:57,485 --> 00:03:59,530
перейдем к компоненту входа.

46
00:03:59,530 --> 00:04:02,320
Большая часть нашей работы находится в компоненте логина.

47
00:04:02,320 --> 00:04:04,090
Позвольте мне сначала создать форму.

48
00:04:04,090 --> 00:04:07,975
Итак, зайдя в файл шаблона компонента входа,

49
00:04:07,975 --> 00:04:14,345
позвольте мне добавить в шаблон для нашей формы, чтобы создать форму здесь.

50
00:04:14,345 --> 00:04:16,190
Итак, в верхней части

51
00:04:16,190 --> 00:04:25,940
я создаю p

52
00:04:25,940 --> 00:04:30,715
, который будет отображать информацию, которую я набрал в форме.

53
00:04:30,715 --> 00:04:36,750
В коде у нас будет переменная JavaScript под названием user,

54
00:04:36,750 --> 00:04:41,175
, которая будет привязана к полям в этой форме.

55
00:04:41,175 --> 00:04:42,500
Теперь, когда мы создадим это,

56
00:04:42,500 --> 00:04:43,690
тогда станет более понятным.

57
00:04:43,690 --> 00:04:45,490
Теперь, здесь, включив это,

58
00:04:45,490 --> 00:04:50,100
, что я разрешаю, это показать изменения.

59
00:04:50,100 --> 00:04:52,990
Когда мы вводим информацию в форму,

60
00:04:52,990 --> 00:04:56,390
соответствующие изменения, которые происходят в коде

61
00:04:56,390 --> 00:05:00,880
отражают состояние формы, могут быть показаны прямо там.

62
00:05:00,880 --> 00:05:04,500
Теперь, кроме того, теперь я собираюсь создать форму здесь.

63
00:05:04,500 --> 00:05:07,210
Итак, мы зайдем, а затем добавим элемент формы здесь.

64
00:05:07,210 --> 00:05:09,470
К этому элементу формы

65
00:05:09,470 --> 00:05:11,000
я собираюсь применить

66
00:05:11,000 --> 00:05:15,260
атрибут novalidate здесь, потому что

67
00:05:15,260 --> 00:05:19,625
мы хотим, чтобы проверка формы была позаботилась Угловой, а не

68
00:05:19,625 --> 00:05:28,820
стандартной проверки формы HTML

69
00:05:28,820 --> 00:05:30,230
, что поддержка браузера.

70
00:05:30,230 --> 00:05:38,810
Итак, мы собираемся перенести эту ответственность на наше Angular приложение.

71
00:05:38,810 --> 00:05:44,800
Итак, вот почему я указываю атрибут novalidate для моего телефона.

72
00:05:44,800 --> 00:05:47,310
Итак, это создает мою форму здесь.

73
00:05:47,310 --> 00:05:53,720
Внутри здесь, я собираюсь использовать mat-dialog-контент.

74
00:05:53,790 --> 00:05:58,360
Теперь, mat-dialog-content, как вы и ожидали,

75
00:05:58,360 --> 00:06:03,740
- это область, которая содержит содержимое самого диалога.

76
00:06:03,740 --> 00:06:06,970
Итак, вот почему мы помещаем этот мат-диалог-контент здесь.

77
00:06:06,970 --> 00:06:14,265
Тогда, здесь, я создаю здесь свою форму.

78
00:06:14,265 --> 00:06:16,675
Итак, я положил p туда.

79
00:06:16,675 --> 00:06:23,915
Внутри этого p, я буду использовать поле матовой формы здесь.

80
00:06:23,915 --> 00:06:28,805
Таким образом, поле mat-form-field позволяет мне группировать набор

81
00:06:28,805 --> 00:06:33,845
связанных с формой элементов, которые я использую вместе.

82
00:06:33,845 --> 00:06:39,765
Итак, здесь, я поставлю вход здесь.

83
00:06:39,765 --> 00:06:44,505
Итак, поле формы ввода из HTML файлов форм.

84
00:06:44,505 --> 00:06:50,255
Затем, к этому, я применим атрибут matInput

85
00:06:50,255 --> 00:06:57,360
, который позволит нам применить стиль дизайна материала для этого ввода.

86
00:06:57,360 --> 00:07:04,635
Затем мы дадим заполнитель для этого как имя пользователя,

87
00:07:04,635 --> 00:07:06,569
и, как вы ожидали,

88
00:07:06,569 --> 00:07:12,220
и тип будет тип текста здесь.

89
00:07:15,140 --> 00:07:19,830
Позвольте мне добавить в ngModel.

90
00:07:19,830 --> 00:07:30,000
Таким образом, форма, управляемая шаблоном, поддерживается через атрибут ngModel здесь.

91
00:07:30,000 --> 00:07:31,520
Итак, с ngModel.

92
00:07:31,520 --> 00:07:36,130
Итак, вы можете увидеть способ объявления этого в папке «Входящие».

93
00:07:36,130 --> 00:07:40,270
Тогда мы скажем user.username.

94
00:07:40,270 --> 00:07:48,345
Итак, этот пользователь будет объектом JavaScript в моем файле TypeScript,

95
00:07:48,345 --> 00:07:52,440
который будет содержать свойство имени пользователя там,

96
00:07:52,440 --> 00:07:58,540
, которое будет отслеживать значение, которое вы вводите в это поле ввода в моей форме там.

97
00:07:58,540 --> 00:08:06,320
Итак, вот почему мы привязываем эту информацию поля ввода к этому объекту JavaScript.

98
00:08:06,320 --> 00:08:08,890
Итак, это двусторонняя привязка данных, которую мы делаем

99
00:08:08,890 --> 00:08:13,250
между элементом формы и соответствующим кодом JavaScript.

100
00:08:13,250 --> 00:08:19,640
Тогда мы дадим это имя в качестве имени пользователя здесь.

101
00:08:19,640 --> 00:08:24,495
Итак, это мои первые поля формы, которые я добавил здесь.

102
00:08:24,495 --> 00:08:29,330
Теперь, аналогично, я добавлю во второе поле формы для пароля.

103
00:08:29,330 --> 00:08:36,255
Так что, для этого, позвольте мне просто скопировать это, а затем вставить его сюда.

104
00:08:36,255 --> 00:08:41,820
Итак, второе поле будет Input, matInput,

105
00:08:41,820 --> 00:08:47,760
заполнитель пароль,

106
00:08:47,760 --> 00:08:52,360
, а затем тип - пароль.

107
00:08:52,360 --> 00:09:01,385
Таким образом, элемент ввода пароля из HTML5 формы поддержки.

108
00:09:01,385 --> 00:09:11,050
Сам ngModel будет привязан к паролю пользователя и имя будет паролем.

109
00:09:11,050 --> 00:09:16,335
Итак, вы видите, что объект JavaScript пользователя теперь содержит два свойства:

110
00:09:16,335 --> 00:09:20,700
имя пользователя и пароль, которые будут отслеживать учетные данные пользователя здесь.

111
00:09:20,700 --> 00:09:24,995
Итак, эти два поля формы внутри этого p здесь,

112
00:09:24,995 --> 00:09:27,740
, а затем также мы добавим в одном

113
00:09:27,740 --> 00:09:35,795
больше называется мат-флажок.

114
00:09:35,795 --> 00:09:41,050
Вы видели, что мы включили модуль чекбокса раньше.

115
00:09:41,050 --> 00:09:43,290
Итак, мы собираемся добавить в это.

116
00:09:43,290 --> 00:09:48,735
Теперь, этот флажок, который при галочке будет информировать

117
00:09:48,735 --> 00:09:55,990
мое угловое приложение, что имя пользователя и пароль должны быть сохранены в приложении.

118
00:09:55,990 --> 00:10:01,220
Итак, позвольте мне связать это с моделью NG для

119
00:10:01,220 --> 00:10:09,730
соответствующего свойства, называемого metrie в объекте пользователя.

120
00:10:09,730 --> 00:10:11,060
Таким образом, это будет,

121
00:10:11,060 --> 00:10:14,020
это свойство будет либо истинным, либо ложным в зависимости от

122
00:10:14,020 --> 00:10:17,315
, установлен ли флажок или снят.

123
00:10:17,315 --> 00:10:19,830
Так вот так мы отслеживаем.

124
00:10:19,830 --> 00:10:24,795
Итак, мы делаем двустороннюю привязку данных между этим флажком и

125
00:10:24,795 --> 00:10:32,330
это свойство называется помнить о пользовательском объекте JavaScript в моем коде.

126
00:10:32,330 --> 00:10:36,260
Тогда имя будет запомниться,

127
00:10:36,260 --> 00:10:43,590
и тогда мы дадим это ярлык, как помните меня.

128
00:10:43,850 --> 00:10:46,620
Итак, когда пользователь проверяет это,

129
00:10:46,620 --> 00:10:50,200
, то информация пользователя будет запоминаться здесь.

130
00:10:50,200 --> 00:10:52,410
Итак, это мат-чекбокс, который мы добавили.

131
00:10:52,410 --> 00:10:54,270
Итак, у нас есть три поля здесь,

132
00:10:54,270 --> 00:10:56,585
имя пользователя, пароль,

133
00:10:56,585 --> 00:11:02,880
, а затем флажок здесь в моей форме здесь.

134
00:11:02,880 --> 00:11:06,090
Итак, это содержание диалога с матами.

135
00:11:06,090 --> 00:11:08,800
Теперь, в дополнение к контенту mat-диалога,

136
00:11:08,800 --> 00:11:14,985
я также могу добавить действия mat-диалога здесь.

137
00:11:14,985 --> 00:11:23,820
Теперь действия диалога могут содержать кнопки, соответствующие этому диалоговому окну.

138
00:11:23,820 --> 00:11:28,145
Итак, это то, что будет действовать как кнопки действий в диалоге,

139
00:11:28,145 --> 00:11:32,210
, а также так как они заключены внутри формы,

140
00:11:32,210 --> 00:11:36,485
эти кнопки также будут выступать в качестве кнопок отправки формы для меня.

141
00:11:36,485 --> 00:11:44,530
Итак, здесь, позвольте мне сделать span класса flex spacer,

142
00:11:46,580 --> 00:11:52,670
, а затем позвольте мне добавить кнопку

143
00:11:55,950 --> 00:12:02,140
mat-button, а затем эту кнопку,

144
00:12:02,140 --> 00:12:07,090
я также превращу это в кнопку закрытия матового диалога.

145
00:12:07,090 --> 00:12:12,115
Таким образом, это будет кнопка отмены, которую я включу в мою форму здесь,

146
00:12:12,115 --> 00:12:14,925
то это нажато диалог будет отклонен,

147
00:12:14,925 --> 00:12:17,960
и, по сути, это означает, что вы не отправляете форму там.

148
00:12:17,960 --> 00:12:20,505
Таким образом, это также действует как кнопка отмены для формы

149
00:12:20,505 --> 00:12:23,595
, а затем также отклоняет диалог в то же время.

150
00:12:23,595 --> 00:12:27,180
Итак, используя этот атрибут к этой кнопке,

151
00:12:27,180 --> 00:12:31,595
мы объявляем это как кнопка, которая отклоняет ошибку,

152
00:12:31,595 --> 00:12:36,940
так же, как у нас есть эта кнопка на панели инструментов.

153
00:12:36,940 --> 00:12:38,990
Итак, матовый диалог закрывается там.

154
00:12:38,990 --> 00:12:42,470
Тогда другая кнопка, что мы будем иметь

155
00:12:42,470 --> 00:12:49,490
для отправки, так что

156
00:12:49,490 --> 00:12:55,030
этот тип кнопки будет кнопка отправки внутри формы там.

157
00:12:55,030 --> 00:12:56,315
Итак, когда это нажата,

158
00:12:56,315 --> 00:13:01,495
, который запускает представление формы для этой формы здесь,

159
00:13:01,495 --> 00:13:06,420
, а затем позвольте мне добавить в класс к этому,

160
00:13:06,420 --> 00:13:13,795
мы скажем фоновый основной, и текст цветочный.

161
00:13:13,795 --> 00:13:19,345
Эти классы я уже добавил в свой файл styles.ACSS.

162
00:13:19,345 --> 00:13:24,800
Итак, текст цветочный белый,

163
00:13:24,800 --> 00:13:31,620
и эта кнопка будет помечена как кнопка входа там.

164
00:13:31,620 --> 00:13:36,090
Итак, это будет синяя кнопка цвета, которая будет отображаться на экране.

165
00:13:36,090 --> 00:13:43,275
Итак, при этом в шаблоне создается моя структура формы.

166
00:13:43,275 --> 00:13:49,355
Теперь следующий шаг - перейти в код, а затем обработать представление формы.

167
00:13:49,355 --> 00:13:54,070
Итак, теперь собирается войти в файл component.ts,

168
00:13:54,070 --> 00:13:57,400
нам нужно обработать форму отправки здесь.

169
00:13:57,400 --> 00:14:02,070
Теперь, первый шаг, который я собираюсь сделать, это когда этот компонент входа будет создан,

170
00:14:02,070 --> 00:14:12,110
мы создадим объект пользователя здесь со свойствами имени пользователя,

171
00:14:12,110 --> 00:14:16,550
, который будет пустой строко,

172
00:14:16,610 --> 00:14:22,570
пароль, который также будет пустой строкой, чтобы начать с

173
00:14:22,570 --> 00:14:27,050
, а затем запомнить, что является ложным.

174
00:14:27,050 --> 00:14:29,640
Теперь, объявив это здесь,

175
00:14:29,640 --> 00:14:33,530
мы также говорим, что теперь можем связать в

176
00:14:33,530 --> 00:14:40,210
эти три свойства с тремя элементами формы в моем шаблоне.

177
00:14:40,210 --> 00:14:43,920
Итак, это то, чего мы добились здесь.

178
00:14:43,920 --> 00:14:46,440
Для конструктора позвольте

179
00:14:46,440 --> 00:14:55,640
мне ввести диалог ref здесь,

180
00:14:55,880 --> 00:15:05,410
mat-диалог ref, и этот диалог mat ref будет принимать соответствующий компонент.

181
00:15:05,410 --> 00:15:08,755
Итак, это ссылка на этот компонент входа здесь.

182
00:15:08,755 --> 00:15:11,990
Итак, это говорит нам, когда это- когда это представлено,

183
00:15:11,990 --> 00:15:14,060
, как справиться с этим.

184
00:15:14,060 --> 00:15:21,985
Итак, здесь, позвольте мне добавить в функцию on submit здесь,

185
00:15:21,985 --> 00:15:24,155
и внутри функции on submit,

186
00:15:24,155 --> 00:15:27,935
Я собираюсь просто войти в систему,

187
00:15:27,935 --> 00:15:32,145
регистрировать соответствующую информацию о пользователях,

188
00:15:32,145 --> 00:15:35,690
, поэтому пользователь нажимает на форму входа,

189
00:15:35,690 --> 00:15:39,430
форму входа и отправляет форму входа.

190
00:15:39,430 --> 00:15:44,585
Я просто собираюсь зарегистрировать информацию пользователя на консоли в данный момент.

191
00:15:44,585 --> 00:15:49,150
Позже мы будем проектировать в серверном курсе.

192
00:15:49,150 --> 00:15:52,310
Мы будем обрабатывать фактический процесс входа в систему, когда

193
00:15:52,310 --> 00:15:57,280
наш сервер будет готов и сможет обработать логин пользователя.

194
00:15:57,280 --> 00:16:03,710
Итак, после этого мы скажем, что диалог закрыт.

195
00:16:03,710 --> 00:16:06,255
Теперь, почему мы включаем это здесь?

196
00:16:06,255 --> 00:16:08,105
Итак, когда форма будет отправлена,

197
00:16:08,105 --> 00:16:13,960
мы также хотим уволить компонент там,

198
00:16:13,960 --> 00:16:15,190
компонент диалога там.

199
00:16:15,190 --> 00:16:16,800
Итак, называя это,

200
00:16:16,800 --> 00:16:19,120
этот диалог ref закрыть,

201
00:16:19,120 --> 00:16:23,620
мы просим компонент диалога быть закрыт здесь.

202
00:16:23,620 --> 00:16:29,650
Итак, вот почему я получаю ссылку на компонент входа здесь,

203
00:16:29,650 --> 00:16:33,655
, который действует как мой компонент диалога здесь.

204
00:16:33,655 --> 00:16:37,445
Таким образом, мы сможем закрыть компонент диалога, сделав это.

205
00:16:37,445 --> 00:16:39,350
Таким образом, как только пользователь отправляет форму,

206
00:16:39,350 --> 00:16:41,440
вы будете регистрировать информацию пользователя,

207
00:16:41,440 --> 00:16:46,415
, а затем закрыть диалоговое окно. Вот оно.

208
00:16:46,415 --> 00:16:51,640
Давайте сохраним изменения, а затем пойдем и посмотрим на обновленное приложение.

209
00:16:51,640 --> 00:16:54,590
Зайдите в наше приложение в браузере,

210
00:16:54,590 --> 00:17:02,900
позвольте мне открыть консоль JavaScript, чтобы вы могли видеть информацию, вошедшей в систему.

211
00:17:02,900 --> 00:17:09,890
Позвольте мне открыть диалог входа здесь с формой уже на месте,

212
00:17:09,890 --> 00:17:12,425
имя пользователя и пароль уже на месте.

213
00:17:12,425 --> 00:17:15,820
Итак, позвольте мне ввести имя пользователя.

214
00:17:15,820 --> 00:17:19,165
Я здесь самовлюбленный.

215
00:17:19,165 --> 00:17:22,710
Итак, я набираю имя пользователя и пароль здесь.

216
00:17:22,710 --> 00:17:26,495
Теперь обратите внимание, что когда я набираю информацию здесь,

217
00:17:26,495 --> 00:17:33,570
, поскольку я показываю значение объекта JavaScript пользователя здесь,

218
00:17:33,570 --> 00:17:42,775
любые изменения, которые я делаю, немедленно отражаются на экране здесь.

219
00:17:42,775 --> 00:17:50,110
Также флажок «Запомнить» установлен и выключен здесь.

220
00:17:50,110 --> 00:17:53,360
Затем, когда я отправлю форму здесь,

221
00:17:53,360 --> 00:17:56,040
вы можете видеть, что в консоли,

222
00:17:56,040 --> 00:17:59,350
информация пользователя регистрируется на консоли,

223
00:17:59,350 --> 00:18:00,595
имя пользователя, пароль,

224
00:18:00,595 --> 00:18:03,440
и значение запоминания блокируется на консоли.

225
00:18:03,440 --> 00:18:06,170
Итак, теперь вы можете видеть, что моя форма входа,

226
00:18:06,170 --> 00:18:09,275
форма, управляемая шаблоном, работает правильно.

227
00:18:09,275 --> 00:18:12,305
С этим мы завершаем это упражнение

228
00:18:12,305 --> 00:18:18,965
, где мы видели, как мы можем разработать шаблон управляемой формы в нашем угловом приложении.

229
00:18:18,965 --> 00:18:22,870
Это хорошее время для вас, чтобы сделать Git Commit с сообщением,

230
00:18:22,870 --> 00:18:26,000
Шаблон Driven Forms Часть 1.