1
00:00:03,650 --> 00:00:09,630
Мы рассмотрели реактивные формы в одном из предыдущих уроков,

2
00:00:09,630 --> 00:00:14,420
, где мы сделали два упражнения, касающиеся реактивных форм,

3
00:00:14,420 --> 00:00:15,695
, как мы их создаем,

4
00:00:15,695 --> 00:00:20,530
, а затем сделали некоторые основные проверки формы на реактивных формах.

5
00:00:20,530 --> 00:00:24,525
Мы продолжим тему в этом уроке

6
00:00:24,525 --> 00:00:28,790
, потому что реактивные формы, как следует из названия,

7
00:00:28,790 --> 00:00:33,019
имеет какое-то отношение к реактивному программированию, как вы могли ожидать.

8
00:00:33,019 --> 00:00:42,429
Теперь реактивные формы также позволяют наблюдать изменения в значениях элементов формы,

9
00:00:42,429 --> 00:00:48,320
с помощью наблюдаемого, что Angular делает доступным называется valueChanges.

10
00:00:48,320 --> 00:00:53,450
Мы будем использовать valueChanges, наблюдаемые в этом упражнении,

11
00:00:53,450 --> 00:00:57,080
для того, чтобы отслеживать изменения значений

12
00:00:57,080 --> 00:01:01,650
их различных элементов формы, а затем немедленно запустить проверку формы.

13
00:01:01,650 --> 00:01:06,350
В этом упражнении мы будем делать большую часть проверки формы в коде

14
00:01:06,350 --> 00:01:11,120
, а не в самом шаблоне,

15
00:01:11,120 --> 00:01:19,189
, как мы сделали с проверкой формы реактора во втором упражнении реактивных форм.

16
00:01:19,189 --> 00:01:24,115
Перейдя к контакту.component.tsfile,

17
00:01:24,115 --> 00:01:29,720
мы собираемся обновить реактивную форму, которую мы создали здесь,

18
00:01:29,720 --> 00:01:34,445
, добавив еще несколько валидаторов для некоторых из этих полей.

19
00:01:34,445 --> 00:01:38,915
Итак, здесь вы видите, что для первой фамилии и

20
00:01:38,915 --> 00:01:43,465
номер телефона и email мы добавили необходимые валидаторы.

21
00:01:43,465 --> 00:01:45,290
Для имени и фамилии

22
00:01:45,290 --> 00:01:48,500
Я собираюсь добавить еще пару валидаторов для

23
00:01:48,500 --> 00:01:52,315
минимальную длину и максимальную длину.

24
00:01:52,315 --> 00:01:57,185
Теперь, если у вас есть более одного валидатора в вашей реактивной форме,

25
00:01:57,185 --> 00:02:04,470
вы должны объявить их, используя там массив.

26
00:02:04,470 --> 00:02:08,385
Таким образом, это должно быть заключено внутри массива здесь.

27
00:02:08,385 --> 00:02:12,790
Итак, вы видите, что я вложил требуемый Validator внутри массива.

28
00:02:12,790 --> 00:02:21,300
Я собираюсь добавить в Validators, minLength Validator.

29
00:02:21,300 --> 00:02:25,250
Итак, для минимальной длины я укажу два как минимальную длину,

30
00:02:25,250 --> 00:02:28,925
, поэтому первое имя должно содержать как минимум два символа.

31
00:02:28,925 --> 00:02:36,645
Также максимальная длина, которую я добавлю

32
00:02:36,645 --> 00:02:48,035
как 25 символов.

33
00:02:48,035 --> 00:02:52,740
Итак, здесь вы видите, что теперь для первого имени у нас есть три разных валидаций,

34
00:02:52,740 --> 00:02:55,455
все заключены в массив здесь.

35
00:02:55,455 --> 00:02:58,620
Требуются валидаторы, Validators minLength,

36
00:02:58,620 --> 00:03:02,135
и Validators maxLength здесь, 25.

37
00:03:02,135 --> 00:03:05,900
Итак, я собираюсь сделать то же самое и для моей фамилии.

38
00:03:05,900 --> 00:03:11,115
Итак, позвольте мне скопировать весь этот луч Validators здесь,

39
00:03:11,115 --> 00:03:21,420
, а затем заменить этот набор Validators.

40
00:03:21,420 --> 00:03:25,330
Теперь кроме того, для телефонного номера

41
00:03:25,330 --> 00:03:29,060
, как вы помните в более ранней версии формы,

42
00:03:29,060 --> 00:03:35,395
номер телефона был готов принимать даже алфавиты,

43
00:03:35,395 --> 00:03:37,015
, но это не правильно.

44
00:03:37,015 --> 00:03:40,070
Телефонные номера обычно являются номерами.

45
00:03:40,070 --> 00:03:43,955
Итак, вот где мы будем использовать другой Validator

46
00:03:43,955 --> 00:03:53,005
, называемый шаблоном Validators.

47
00:03:53,005 --> 00:03:57,890
Таким образом, шаблон Validator позволяет нам указать шаблон для

48
00:03:57,890 --> 00:04:02,719
значений, введенных в этот конкретный элемент формы,

49
00:04:02,719 --> 00:04:09,465
, а затем проверить, чтобы убедиться, что значение соответствует шаблону, указанному.

50
00:04:09,465 --> 00:04:12,470
Итак, здесь шаблон, который мы будем использовать, заключается в том, что значение

51
00:04:12,470 --> 00:04:17,180
должно содержать только числа от нуля до девяти.

52
00:04:17,180 --> 00:04:19,015
Для добавления шаблона

53
00:04:19,015 --> 00:04:23,860
нам нужно сделать это в файле шаблона, как мы увидим за короткое время.

54
00:04:23,860 --> 00:04:26,415
Аналогично, для электронной почты

55
00:04:26,415 --> 00:04:31,635
У меня также будет другой валидатор, называемый в качестве валидатора электронной почты.

56
00:04:31,635 --> 00:04:35,035
Итак, мы добавим в электронную почту Validators.

57
00:04:35,035 --> 00:04:40,010
Это также означает, что нам нужно добавить атрибут

58
00:04:40,010 --> 00:04:44,990
под названием email на вход в наш файл шаблона.

59
00:04:44,990 --> 00:04:53,145
Теперь с этими изменениями моя проверка формы стала более надежной в этом упражнении.

60
00:04:53,145 --> 00:04:59,534
Теперь, когда форма испытывает изменения в любом из ее элементов формы,

61
00:04:59,534 --> 00:05:09,530
, то угловая структура предоставляет наблюдаемый называется valueChanges наблюдаемый.

62
00:05:09,530 --> 00:05:16,150
Итак, я собираюсь использовать valueChanges, наблюдаемые в моей форме обратной связи.

63
00:05:16,550 --> 00:05:19,770
Итак, значениеИзменения наблюдаемы.

64
00:05:19,770 --> 00:05:26,640
Таким образом, valueChanges теперь можно подписаться в рамках этого конкретного метода.

65
00:05:26,640 --> 00:05:28,415
Поэтому, когда мы создаем саму форму,

66
00:05:28,415 --> 00:05:31,520
мы будем подписываться на valueChanges наблюдаемые здесь.

67
00:05:31,520 --> 00:05:33,470
Теперь, когда valueChanges,

68
00:05:33,470 --> 00:05:38,274
поэтому, подписавшись на этот наблюдаемый,

69
00:05:38,274 --> 00:05:44,630
в рамках подписки я буду указывать, что должно быть сделано, когда valueChanges.

70
00:05:44,630 --> 00:05:49,160
Итак, когда valueChanges я бы получил некоторые данные здесь,

71
00:05:49,160 --> 00:05:52,055
от фермы, чтобы указать

72
00:05:52,055 --> 00:05:59,050
, какой конкретный элемент формы испытал изменение значения.

73
00:05:59,050 --> 00:06:00,665
Затем, когда это произойдет,

74
00:06:00,665 --> 00:06:07,865
я собираюсь запустить локальный метод, который я реализую под названием onValueChanged,

75
00:06:07,865 --> 00:06:13,165
, а затем предоставить эти данные в качестве параметра для этого метода.

76
00:06:13,165 --> 00:06:16,455
Теперь, внутри этого метода onValueChanged,

77
00:06:16,455 --> 00:06:20,445
я собираюсь инициировать проверку формы,

78
00:06:20,445 --> 00:06:27,155
, а затем соответствующим образом определить сообщения об ошибках формы на основе того, что

79
00:06:27,155 --> 00:06:35,380
этот объект данных, который я получаю здесь, укажет мне.

80
00:06:35,380 --> 00:06:39,125
Кроме того, когда я впервые создаю форму,

81
00:06:39,125 --> 00:06:47,114
Я вызову метод onValueChanged без какого-либо параметра

82
00:06:47,114 --> 00:06:50,250
, и это будет использоваться для

83
00:06:50,250 --> 00:06:58,615
сброса сообщений проверки формы.

84
00:06:58,615 --> 00:07:02,195
Теперь, как создать сообщения проверки формы?

85
00:07:02,195 --> 00:07:09,230
Чтобы сделать это, я собираюсь полностью определить свои сообщения проверки формы в коде здесь.

86
00:07:09,230 --> 00:07:12,620
Затем через код

87
00:07:12,620 --> 00:07:15,920
я адаптирую сообщения проверки формы,

88
00:07:15,920 --> 00:07:23,785
, и это будет затем использоваться для отображения сообщений об ошибках в моем шаблоне формы.

89
00:07:23,785 --> 00:07:33,830
Итак, чтобы сделать это, то, что я собираюсь сделать, это добавить несколько объектов JavaScript здесь.

90
00:07:33,830 --> 00:07:42,485
Один из объектов JavaScript, который я собираюсь добавить, называется ошибками формы.

91
00:07:42,485 --> 00:07:46,790
Итак, это простой объект JavaScript, который

92
00:07:46,790 --> 00:07:52,315
будет содержать все ошибки для конкретной формы здесь.

93
00:07:52,315 --> 00:07:54,799
Таким образом, в форме ошибок,

94
00:07:54,799 --> 00:08:02,609
я буду использовать четыре разных поля,

95
00:08:02,609 --> 00:08:11,275
имя, фамилия.

96
00:08:11,275 --> 00:08:13,305
Итак, как вы помните,

97
00:08:13,305 --> 00:08:21,889
они соответствуют четырем элементам формы, на которых я делаю проверку формы,

98
00:08:21,889 --> 00:08:30,470
номер телефона и адрес электронной почты.

99
00:08:30,470 --> 00:08:35,020
Теперь, почему я определяю этот объект JavaScript здесь?

100
00:08:35,020 --> 00:08:41,075
Теперь этот объект JavaScript, как вы видите, содержит четыре элемента здесь.

101
00:08:41,075 --> 00:08:44,270
Теперь, когда я выполняю проверку формы,

102
00:08:44,270 --> 00:08:47,090
напоминаю, что я уже указал, что

103
00:08:47,090 --> 00:08:50,915
я собираюсь создать новый метод onValueChange.

104
00:08:50,915 --> 00:08:55,145
Внутри onValueChange способ написания кода заключается в том, что

105
00:08:55,145 --> 00:08:58,300
, если какая-либо ошибка обнаружена,

106
00:08:58,300 --> 00:09:02,315
строка, содержащая сообщение, соответствующее

107
00:09:02,315 --> 00:09:08,135
, что ошибка будет добавлена в этот объект JavaScript.

108
00:09:08,135 --> 00:09:10,535
Итак, таким образом в моем коде,

109
00:09:10,535 --> 00:09:13,204
я могу выполнить проверку формы.

110
00:09:13,204 --> 00:09:15,315
Теперь, в дополнение к этому,

111
00:09:15,315 --> 00:09:21,150
я теперь определим несколько сообщений проверки.

112
00:09:21,840 --> 00:09:27,100
Теперь, этот конкретный шаблон делать вещи,

113
00:09:27,100 --> 00:09:36,345
я узнал, прочитав документацию по проверке формы на веб-сайте angular.io.

114
00:09:36,345 --> 00:09:43,020
Итак, у них есть целая документация о том, как сделать проверку формы и ссылка на которую

115
00:09:43,020 --> 00:09:45,315
доступна в дополнительных ресурсах

116
00:09:45,315 --> 00:09:50,510
этой главы, а также в предыдущих главах по угловым формам.

117
00:09:50,510 --> 00:09:55,950
Итак, там в этом конкретном документе они

118
00:09:55,950 --> 00:10:02,655
прописывают это как способ выполнения проверки формы, и я обнаружил, что это очень интуитивно.

119
00:10:02,655 --> 00:10:08,640
Итак, я также принял тот же шаблон для проверки формы в коде.

120
00:10:08,640 --> 00:10:10,500
Итак, наряду с здесь,

121
00:10:10,500 --> 00:10:20,515
я собираюсь определить сообщения проверки для всех возможных полей здесь.

122
00:10:20,515 --> 00:10:22,475
Итак, для первого поля имени

123
00:10:22,475 --> 00:10:30,050
я определяю несколько сообщений проверки здесь, поэтому я бы сказал,

124
00:10:30,050 --> 00:10:32,965
«требуется», а затем сказать,

125
00:10:32,965 --> 00:10:39,940
«имя требуется», как это,

126
00:10:39,940 --> 00:10:48,790
я добавлю несколько сообщений проверки

127
00:10:48,790 --> 00:10:52,030
здесь и сказать,

128
00:10:52,030 --> 00:10:57,070
«Имя должно быть длиной не менее 2 символов», а затем я

129
00:10:57,070 --> 00:11:05,770
также добавит,

130
00:11:05,770 --> 00:11:15,700
«max length» и соответствующее сообщение будет,

131
00:11:15,700 --> 00:11:23,630
«Имя не может быть больше 25».

132
00:11:24,780 --> 00:11:29,685
Если у вас есть имя, которое состоит из 25 символов,

133
00:11:29,685 --> 00:11:35,115
вы должны действительно проклинать своих родителей за это, поверьте мне,

134
00:11:35,115 --> 00:11:39,670
одно из моих отчетных имен длинное второе имя,

135
00:11:39,670 --> 00:11:46,035
и которое я не использую явно в своих документах.

136
00:11:46,035 --> 00:11:48,870
Но, я могу понять боль,

137
00:11:48,870 --> 00:11:55,450
если у вас длинное имя больше 25 символов.

138
00:11:56,700 --> 00:12:02,900
Люди из некоторых штатов в южной части Индии имеют длинные имена,

139
00:12:03,690 --> 00:12:06,870
мое государство включает, эй,

140
00:12:06,870 --> 00:12:09,270
давайте повеселиться, пока мы на нем.

141
00:12:09,270 --> 00:12:17,180
Хорошо, я также включу то же самое для фамилии.

142
00:12:17,180 --> 00:12:23,380
Итак, я собираюсь отредактировать это

143
00:12:23,380 --> 00:12:33,430
и указать то же самое, что и фамилия.

144
00:12:33,430 --> 00:12:39,020
Итак, как вы видите внутри кода, вы можете указать набор сообщений об ошибках.

145
00:12:39,020 --> 00:12:42,855
Теперь, если вы добавите новую проверку в свои формы,

146
00:12:42,855 --> 00:12:44,505
все, что вам нужно сделать, это,

147
00:12:44,505 --> 00:12:47,230
прийти сюда и добавить новое сообщение об ошибке в

148
00:12:47,230 --> 00:12:54,635
этот объект JavaScript здесь, и ваш код будет работать нормально, как таковой.

149
00:12:54,635 --> 00:13:03,015
Итак, это преимущество использования этого шаблона для разработки вашей проверки в коде.

150
00:13:03,015 --> 00:13:09,835
Продолжая, позвольте мне определить проверку для телефонного номера и

151
00:13:09,835 --> 00:13:17,700
две проверки для телефонных номеров, которые произойдут, является «обязательным».

152
00:13:17,700 --> 00:13:22,390
Итак, я просто собираюсь скопировать «обязательно» оттуда,

153
00:13:22,390 --> 00:13:24,170
и вставить его здесь,

154
00:13:24,170 --> 00:13:27,215
, и я бы сказал,

155
00:13:27,215 --> 00:13:36,910
«Номер телефона требуется», и следующее сообщение об ошибке будет для «шаблона».

156
00:13:36,910 --> 00:13:42,585
Итак, сообщение об ошибке гласит:

157
00:13:42,585 --> 00:13:50,770
«Номер телефона должен содержать только номера».

158
00:13:50,910 --> 00:13:58,070
Итак, это другое сообщение, аналогично электронной почте.

159
00:13:58,070 --> 00:14:03,109
Итак, как вы можете видеть значения, которые я использую здесь

160
00:14:03,109 --> 00:14:08,430
, соответствуют именам валидатора, которые я использовал,

161
00:14:08,430 --> 00:14:12,305
«средняя длина», «максимальная длина требуется», «шаблон».

162
00:14:12,305 --> 00:14:14,280
Таким образом, аналогично для электронной почты

163
00:14:14,280 --> 00:14:18,720
вы увидите «required» и «Email'.

164
00:14:18,720 --> 00:14:28,615
Итак, я просто скопирую «обязательно» здесь и скажу: «Требуется электронная почта».

165
00:14:28,615 --> 00:14:36,020
Другой шаблон, как вы помните, для электронной почты, и я бы сказал,

166
00:14:36,020 --> 00:14:40,865
«Электронная почта не в допустимом формате».

167
00:14:40,865 --> 00:14:43,200
Итак, как правило, если ваш email не содержит

168
00:14:43,200 --> 00:14:48,190
знак @ и символы на обеих сторонах знака @,

169
00:14:48,190 --> 00:14:50,230
то это не действительное письмо.

170
00:14:50,230 --> 00:14:58,265
Этот валидатор электронной почты уже встроен в модуль угловых реактивных форм.

171
00:14:58,265 --> 00:15:02,240
Итак, мы будем использовать электронную почту Validator здесь.

172
00:15:02,240 --> 00:15:07,450
Итак, здесь у нас есть все сообщения проверки, определенные в коде.

173
00:15:07,450 --> 00:15:14,340
Таким образом, это очень легко расширить их для дополнительных полей, если вам требуется, а также

174
00:15:14,340 --> 00:15:17,770
добавить больше сообщений проверки для дополнительных валидаций

175
00:15:17,770 --> 00:15:21,865
, которые вы можете ввести для каждого из этих полей формы.

176
00:15:21,865 --> 00:15:25,785
Кроме того, эти ошибки формы объекта помогают мне отслеживать

177
00:15:25,785 --> 00:15:31,415
все ошибки, связанные с каждым из элементов в моем телефоне.

178
00:15:31,415 --> 00:15:34,390
Итак, в настоящее время я проверяю только эти четыре элемента,

179
00:15:34,390 --> 00:15:37,165
, поэтому у меня есть только для этого.

180
00:15:37,165 --> 00:15:42,365
Небольшая коррекция, «средняя длина» должна быть min,

181
00:15:42,365 --> 00:15:45,910
маленькая 'l' и максимальная длина также с небольшим 'l',

182
00:15:45,910 --> 00:15:48,140
аналогично для фамилии также.

183
00:15:48,140 --> 00:15:53,750
Теперь напишем код для метода изменения значений on.

184
00:15:53,750 --> 00:15:55,765
Итак, я собираюсь написать метод

185
00:15:55,765 --> 00:16:02,860
здесь, «ValueChanged», а затем этот

186
00:16:02,860 --> 00:16:08,275
возьмет параметр, возможно.

187
00:16:08,275 --> 00:16:10,900
Вот почему я поставил вопросительный знак данных

188
00:16:10,900 --> 00:16:16,760
, что означает, что параметр является необязательным.

189
00:16:17,760 --> 00:16:27,610
Итак, первое, что я проверю, это «эта форма обратной связи»,

190
00:16:27,610 --> 00:16:32,290
, что означает, что если форма обратной связи не была создана тогда,

191
00:16:32,290 --> 00:16:34,960
и если этот метод вызывается,

192
00:16:34,960 --> 00:16:42,130
то вы должны просто «вернуть» без чего.

193
00:16:42,130 --> 00:16:50,680
Затем я определяю константу

194
00:16:50,680 --> 00:16:56,780
, называемую «эта обратная связь

195
00:16:56,780 --> 00:17:03,025
форма», просто чтобы легко определить остальную часть кода,

196
00:17:03,025 --> 00:17:05,380
, то я бы сказал: «для поля

197
00:17:06,240 --> 00:17:16,330
const в этом.form ошибок».

198
00:17:16,330 --> 00:17:21,510
Итак, обратите внимание, что это поле будет принимать это.form ошибки,

199
00:17:21,510 --> 00:17:24,710
объект ошибок формы, который мы определили ранее.

200
00:17:24,710 --> 00:17:28,150
Итак, чувство означает, что я проверю все четыре.

201
00:17:28,150 --> 00:17:29,890
Итак, всякий раз, когда я обнаруживаю какие-либо изменения,

202
00:17:29,890 --> 00:17:31,260
имя, фамилия,

203
00:17:31,260 --> 00:17:32,820
номер тел и адрес электронной почты.

204
00:17:32,820 --> 00:17:41,080
Итак, вот почему эти четыре будут носить те же имена, что и мы использовали в форме

205
00:17:41,080 --> 00:17:50,330
, и чтобы код, написанный здесь, был простым для работы.

206
00:17:52,770 --> 00:17:56,650
Итак, теперь я собираюсь проверить поля формы.

207
00:17:56,650 --> 00:18:07,090
Затем я бы сначала

208
00:18:07,090 --> 00:18:16,000
убедиться, что в случае, если я ранее прикреплял какие-либо сообщения к этим полям формы,

209
00:18:16,000 --> 00:18:17,810
форма ошибки объекта там,

210
00:18:17,810 --> 00:18:19,665
, то я собираюсь очистить все из них.

211
00:18:19,665 --> 00:18:23,830
Итак, вот почему, если вы вызываете это без параметра,

212
00:18:23,830 --> 00:18:26,600
все поля ошибок формы будут очищены,

213
00:18:26,600 --> 00:18:36,335
, а затем я бы сделал, «control FormGet».

214
00:18:36,335 --> 00:18:44,330
Итак, обратите внимание, что я использую это поле, чтобы сделать FormGet,

215
00:18:44,330 --> 00:18:48,530
я получаю доступ к этому конкретному полю формы.

216
00:18:48,530 --> 00:18:52,090
Итак, обратите внимание, что раньше мы делали «feedbackform.this.feedbackform.get"firstname».

217
00:18:58,930 --> 00:19:04,870
и так далее. Итак, я упростил то, что в эту конкретную константу, которую мы

218
00:19:04,870 --> 00:19:13,000
определили здесь, а затем я скажу: «Если контроль».

219
00:19:13,000 --> 00:19:22,645
Итак, что означает, что если элемент управления не равен нулю и «control.purged».

220
00:19:22,645 --> 00:19:28,150
Итак, если это конкретное поле уже грязно

221
00:19:28,150 --> 00:19:33,635
, а не «контроль действителен».

222
00:19:33,635 --> 00:19:36,280
Итак, означает, что для каждого из полей

223
00:19:36,280 --> 00:19:39,780
я буквально проверяю, является ли он действительным,

224
00:19:39,780 --> 00:19:40,840
если он грязный,

225
00:19:40,840 --> 00:19:44,260
, а затем, если элемент управления уже есть.

226
00:19:44,260 --> 00:19:48,430
Затем я собираюсь проверить, какие ошибки были добавлены в

227
00:19:48,430 --> 00:19:53,185
этот конкретный элемент управления формой там.

228
00:19:53,185 --> 00:19:55,045
Итак, здесь я скажу

229
00:19:55,045 --> 00:19:59,500
«const сообщения, равные

230
00:19:59,500 --> 00:20:06,560
это.validation messages».

231
00:20:07,260 --> 00:20:10,635
Обратите внимание, как я забираю

232
00:20:10,635 --> 00:20:15,785
все сообщения проверки, соответствующие этому конкретному полю firstname,

233
00:20:15,785 --> 00:20:19,370
lastname или telnum или email,

234
00:20:19,370 --> 00:20:23,585
, а затем я проверю и посмотрим, нужно ли мне добавить это в поле.

235
00:20:23,585 --> 00:20:25,050
Итак, как мне это сделать?

236
00:20:25,050 --> 00:20:35,360
Итак, мы делаем для const ключа в control.errors.

237
00:20:35,360 --> 00:20:45,510
Итак, обратите внимание, что этот элемент управления является формой обратной связь.get и.error,

238
00:20:45,510 --> 00:20:48,980
, поэтому я проверяю, есть ли там какие-либо ошибки.

239
00:20:48,980 --> 00:20:51,370
Тогда, в таком случае,

240
00:20:51,370 --> 00:20:58,485
я добавлю это поле ошибок формы.

241
00:20:58,485 --> 00:21:06,285
Итак, для этого конкретного элемента в объекте JavaScript, который я определил здесь,

242
00:21:06,285 --> 00:21:13,180
я бы добавил ключ сообщений

243
00:21:13,180 --> 00:21:21,135
плюс и пространство здесь.

244
00:21:21,135 --> 00:21:24,590
Итак, теперь независимо от формы обследования ошибок

245
00:21:24,590 --> 00:21:27,555
или соответствующее сообщение будет принято и прикреплено в,

246
00:21:27,555 --> 00:21:32,350
, а затем мои ошибки формы JavaScript объект теперь будет содержать

247
00:21:32,350 --> 00:21:34,970
все сообщения об ошибках, прикрепленные вместе, когда

248
00:21:34,970 --> 00:21:39,780
этот конкретный на значения изменился метод крыс.

249
00:21:39,780 --> 00:21:44,430
Теперь, этот конкретный фрагмент кода, который я заимствовал из

250
00:21:44,430 --> 00:21:50,560
документацию проверки формы на angular.iu.

251
00:21:50,560 --> 00:21:55,240
Я обнаружил, что это очень интуитивный способ проверки ошибок формы.

252
00:21:55,240 --> 00:22:02,195
Итак, я подумал, почему бы не использовать это в наших угловых реактивных формах упражнений.

253
00:22:02,195 --> 00:22:05,515
Итак, добавив туда этот код.

254
00:22:05,515 --> 00:22:15,180
Теперь мое приложение готово выполнить проверку формы для моей реактивной формы.

255
00:22:15,180 --> 00:22:22,500
Итак, теперь следующий шаг - перейти к контактному компоненту. html,

256
00:22:22,500 --> 00:22:25,805
файл шаблона, а затем обновить файл шаблона.

257
00:22:25,805 --> 00:22:28,505
Итак, перейдя к этому файлу шаблона,

258
00:22:28,505 --> 00:22:31,275
мы теперь перейдем к форме,

259
00:22:31,275 --> 00:22:39,100
и в этой форме теперь вместо того, чтобы делать все эти проверки в коде,

260
00:22:39,920 --> 00:22:48,165
теперь мы можем упростить много кода здесь, в файле шаблона здесь.

261
00:22:48,165 --> 00:22:50,550
Теперь вместо того, чтобы делать все эти проверки,

262
00:22:50,550 --> 00:22:56,065
то, что мы понимаем, что объект ошибок формы JavaScript в

263
00:22:56,065 --> 00:23:00,270
мой файл машинописного текста, если есть ошибки, то

264
00:23:00,270 --> 00:23:05,610
ошибки формы JavaScript объект для этого конкретного поля,

265
00:23:05,610 --> 00:23:10,125
будет иметь все сообщения об ошибках, прикрепленные к нему.

266
00:23:10,125 --> 00:23:11,460
Если ошибок нет,

267
00:23:11,460 --> 00:23:14,505
, то этих сообщений об ошибках там не будет.

268
00:23:14,505 --> 00:23:17,860
Итак, это то, что я собираюсь использовать, чтобы проверить и

269
00:23:17,860 --> 00:23:21,245
посмотреть, должен ли я отображать ошибку формы или нет.

270
00:23:21,245 --> 00:23:24,685
Итак, на этот счет вместо того, чтобы проверять все это,

271
00:23:24,685 --> 00:23:34,740
единственное, что мне нужно проверить здесь, это formErrors firstname, вот и все.

272
00:23:34,740 --> 00:23:40,450
Так что, очень легко проверить на ошибки здесь.

273
00:23:41,110 --> 00:23:47,095
Точно так же, так что весь этот код теперь упрощается здесь,

274
00:23:47,095 --> 00:23:52,100
и аналогичным образом, когда вы проверяете сообщение здесь,

275
00:23:52,100 --> 00:23:56,615
, что мы собираемся сделать, я собираюсь изменить все это от

276
00:23:56,615 --> 00:24:05,165
требуется до formErrors.firstname.

277
00:24:05,165 --> 00:24:08,955
Вот оно. Если это существует,

278
00:24:08,955 --> 00:24:14,760
тогда все сообщения об ошибках, соответствующие этому, уже будут там,

279
00:24:14,760 --> 00:24:19,620
, поэтому мне просто нужно сделать интерполяцию, а затем отобразить formErrors.firstname здесь,

280
00:24:19,620 --> 00:24:28,385
так просто, как это.

281
00:24:28,385 --> 00:24:30,240
Теперь вы видите, выполняя

282
00:24:30,240 --> 00:24:36,355
все проверки ошибок формы и код и выполняя все проверки и так далее в коде,

283
00:24:36,355 --> 00:24:40,200
вы уже построили сообщения об ошибках, которые нам нужно отобразить.

284
00:24:40,200 --> 00:24:42,740
Все, что мы делаем, это мы берем это сообщение об ошибке, а затем помещаем

285
00:24:42,740 --> 00:24:45,745
это в шаблон здесь, вот и все.

286
00:24:45,745 --> 00:24:50,105
Код шаблона становится более упрощенным в этом конкретном случае

287
00:24:50,105 --> 00:24:57,225
, а также выполняя проверку формы с использованием кода машинописного текста,

288
00:24:57,225 --> 00:25:02,045
мы упростили шаблон здесь, в то же время мы можем сделать

289
00:25:02,045 --> 00:25:09,165
более сложную проверку формы в нашем коде машинописного кода.

290
00:25:09,165 --> 00:25:16,500
Я собираюсь идти вперед и сделать те же изменения в оставшихся полях здесь,

291
00:25:16,500 --> 00:25:20,460
, поэтому для поля lastname

292
00:25:20,460 --> 00:25:30,850
Я собираюсь снова заменить все это на formErrors.lastname.

293
00:25:34,100 --> 00:25:41,050
Теперь, снова сделай то же самое для номера телефона.

294
00:25:41,330 --> 00:25:46,910
Теперь, опять же, как вы видите, структура шаблона становится очень,

295
00:25:46,910 --> 00:25:50,230
очень равномерной в этом случае.

296
00:25:50,230 --> 00:25:55,020
Таким образом, это также еще один способ упрощения

297
00:25:55,020 --> 00:26:01,660
структуры вашего шаблона, продолжая в поле электронной почты здесь.

298
00:26:01,660 --> 00:26:06,640
Я собираюсь сделать то же изменение и в поле электронной почты.

299
00:26:06,640 --> 00:26:10,430
Итак, я бы сказал formErrors.email

300
00:26:12,470 --> 00:26:19,140
и заменить это на formatters.email.

301
00:26:19,140 --> 00:26:20,995
Итак, как вы можете видеть,

302
00:26:20,995 --> 00:26:28,455
ваш код шаблона значительно упростился по сравнению с предыдущим.

303
00:26:28,455 --> 00:26:32,545
С этим все проверки ошибок, которые я требую

304
00:26:32,545 --> 00:26:36,600
, были добавлены в мой шаблон, и мой шаблон теперь обновлен,

305
00:26:36,600 --> 00:26:38,900
, поэтому давайте сохраним изменения.

306
00:26:39,560 --> 00:26:46,800
Две другие вещи, которые мне нужно добавить, это атрибут

307
00:26:46,800 --> 00:26:53,255
называется email в это конкретное поле под названием email.

308
00:26:53,255 --> 00:26:56,625
Итак, помните, что мы добавили e-mail Validator здесь.

309
00:26:56,625 --> 00:26:58,300
Итак, наряду с обязательным,

310
00:26:58,300 --> 00:27:03,655
я собираюсь добавить электронную почту также в поле ввода здесь.

311
00:27:03,655 --> 00:27:05,655
Аналогично, для telnum

312
00:27:05,655 --> 00:27:08,115
мы используем шаблон там.

313
00:27:08,115 --> 00:27:14,670
Итак, я собираюсь добавить в шаблон, так что это поле ввода для telnum.

314
00:27:14,670 --> 00:27:24,485
Итак, в поле ввода я собираюсь добавить шаблон равен и

315
00:27:24,485 --> 00:27:29,250
шаблон, который я собираюсь добавить, является

316
00:27:29,250 --> 00:27:35,350
в квадратных скобках от нуля до девяти,

317
00:27:35,350 --> 00:27:37,875
, а затем положить туда звезду.

318
00:27:37,875 --> 00:27:45,430
Итак, что означает, что это что-то от нуля до девяти повторяется несколько раз.

319
00:27:45,430 --> 00:27:51,045
Таким образом, номер телефона может содержать любые номера от нуля до девяти.

320
00:27:51,045 --> 00:27:53,370
Любое число этих чисел.

321
00:27:53,370 --> 00:27:57,085
Вы также можете поместить minlength и maxlength в поле telnum

322
00:27:57,085 --> 00:28:01,100
, если для вашей конкретной страны номер телефона имеет фиксированный формат,

323
00:28:01,100 --> 00:28:02,440
вы можете сделать это тоже.

324
00:28:02,440 --> 00:28:05,410
Таким образом, это можно легко сделать.

325
00:28:05,410 --> 00:28:08,130
Но в этом упражнении

326
00:28:08,130 --> 00:28:13,470
я не добавлял ограничения minlength и maxlength для телнума здесь.

327
00:28:13,470 --> 00:28:15,720
Теперь, что мы сделали все обновления,

328
00:28:15,720 --> 00:28:23,150
давайте сохраним изменения, а затем пойти и взглянуть на форму в браузере.

329
00:28:23,150 --> 00:28:25,640
Перейдя в браузер сейчас,

330
00:28:25,640 --> 00:28:28,920
, давайте прокрутимся вниз до формы здесь.

331
00:28:28,920 --> 00:28:34,775
Давайте набрать имя и, как вы видите, когда вы вводите только один символ,

332
00:28:34,775 --> 00:28:38,290
то сообщение об ошибке немедленно отображается,

333
00:28:38,290 --> 00:28:42,490
но в момент ввода дополнительных символов, что сообщение об ошибке исчезнет.

334
00:28:42,490 --> 00:28:44,980
Аналогично, для фамилии.

335
00:28:44,980 --> 00:28:50,794
Для номера телефона, если вы пытаетесь ввести что-либо, кроме номеров,

336
00:28:50,794 --> 00:28:53,830
, тогда отображаются сообщения об ошибках.

337
00:28:54,240 --> 00:28:56,575
Таким образом, вы можете ввести,

338
00:28:56,575 --> 00:29:04,790
аналогично для электронной почты, так что вы видите, что адрес электронной почты ненедопустимый формат будет отображаться.

339
00:29:04,790 --> 00:29:10,380
Если у вас нет электронного письма, то он также показывает сообщение об ошибке.

340
00:29:10,380 --> 00:29:14,415
Но, когда вы вводите что-то вроде этого,

341
00:29:14,415 --> 00:29:18,745
то это считается допустимым форматом электронной почты, поэтому он будет принят.

342
00:29:18,745 --> 00:29:23,895
Таким образом, это набор сообщений об ошибках и проверка формы

343
00:29:23,895 --> 00:29:30,080
сделано полностью в коде, как это было сделано в этом конкретном упражнении.

344
00:29:30,080 --> 00:29:33,625
Итак, этим мы завершаем это упражнение.

345
00:29:33,625 --> 00:29:40,200
В этом упражнении мы видели, как использование изменения значения наблюдается,

346
00:29:40,200 --> 00:29:46,915
, и мы также видели, как мы можем сделать проверку формы в нашем коде машинописного кода.

347
00:29:46,915 --> 00:29:49,040
Это завершает это упражнение.

348
00:29:49,040 --> 00:29:52,030
Это хорошее время для вас, чтобы сделать git commit с

349
00:29:52,030 --> 00:29:56,310
сообщение reactive образует часть третья.