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

2
00:00:04,735 --> 00:00:09,734
Теперь, когда мы имели краткое введение в проверку реактивной формы в

3
00:00:09,734 --> 00:00:14,901
предыдущей лекции, давайте перейдем к следующему упражнению, где мы могли бы

4
00:00:14,901 --> 00:00:20,926
применить проверку формы к реактивной форме, которую мы создали в предыдущем упражнении.

5
00:00:20,926 --> 00:00:26,101
Итак, отправляясь в наш контактный компонент машинописного файла,

6
00:00:26,101 --> 00:00:34,463
давайте добавим в валидаторы формы к каждому из этих свойств в нашей модели формы.

7
00:00:34,463 --> 00:00:42,264
Так что для первого имени я бы сказал в массиве, Validators.

8
00:00:45,794 --> 00:00:50,830
Обязательно, Точно так же я буду

9
00:00:50,830 --> 00:00:55,977
применить то же самое к, lastname.

10
00:00:58,032 --> 00:01:02,361
Тогда по электронной почте, а также для telnum, так что для

11
00:01:02,361 --> 00:01:09,030
telnum я бы сказал для оставшихся трех я могу оставить их открытыми,

12
00:01:09,030 --> 00:01:16,066
потому что я согласен с либо ложным или истинным и дать им другие значения.

13
00:01:16,066 --> 00:01:21,117
Поскольку это небольшой переключатель и contacttype может принимать только один

14
00:01:21,117 --> 00:01:26,166
из трех значений и значение Default уже дано там,

15
00:01:26,166 --> 00:01:30,470
и для сообщения, мы можем сделать его не обязательным значением.

16
00:01:30,470 --> 00:01:32,595
Если пользователь не хочет вводить комментарии,

17
00:01:32,595 --> 00:01:36,030
вы можете позволить им не вводить комментарии, но если вы хотите,

18
00:01:36,030 --> 00:01:39,619
вы можете добавить Validators.readecired даже для сообщения.

19
00:01:39,619 --> 00:01:46,890
Кроме того, при сбросе формы в методе onSubmit здесь

20
00:01:46,890 --> 00:01:52,910
вы также можете сбросить форму на ее начальное значение, как мы указали

21
00:01:52,910 --> 00:01:57,630
в методе, где мы создали форму.

22
00:01:57,630 --> 00:02:05,100
Таким образом, в пределах значения сброса он принимает объект в качестве параметра здесь.

23
00:02:05,100 --> 00:02:10,479
Этот объект будет использоваться методом сброса, сделав

24
00:02:10,479 --> 00:02:17,447
использовать метод заданного значения, который мы видели в лекции ранее, чтобы сбросить

25
00:02:17,447 --> 00:02:24,192
форму в условие, как это было при его первоначальном создании.

26
00:02:24,192 --> 00:02:28,467
Итак, здесь мы можем предоставить

27
00:02:28,467 --> 00:02:35,442
параметры, такие как firstname: ',

28
00:02:35,442 --> 00:02:41,745
lastname:' ', telnum: 0,

29
00:02:43,660 --> 00:02:47,219
Затем email:' ',

30
00:02:49,160 --> 00:02:53,690
согласиться: false,

31
00:02:53,690 --> 00:03:01,132
contactttype:' None ',

32
00:03:01,132 --> 00:03:07,940
сообщение:'});.

33
00:03:07,940 --> 00:03:11,206
Таким образом, эти значения, которые мы предоставили в этом объекте

34
00:03:14,042 --> 00:03:19,081
JavaScript, который мы даем нам параметр для метода сброса

35
00:03:19,081 --> 00:03:23,514
будет иметь точно такие же значения, как мы видели для

36
00:03:23,514 --> 00:03:28,168
эти свойства, когда мы создали эту форму обратной связи.

37
00:03:28,168 --> 00:03:32,325
Нам также нужно полностью сбросить форму в шаблоне.

38
00:03:32,325 --> 00:03:36,532
Итак, чтобы сделать это, чтобы вернуться к импорту здесь, и

39
00:03:36,532 --> 00:03:43,130
, тогда мы также импортируем ViewChild} из '@angular /core';.

40
00:03:43,130 --> 00:03:45,950
Это позволит нам получить доступ к

41
00:03:45,950 --> 00:03:49,910
любому из элементов child dom в моем шаблоне.

42
00:03:49,910 --> 00:03:54,054
Поэтому после этого, войдя в код

43
00:03:54,054 --> 00:03:59,321
здесь, в ContactComponent, я могу сказать @ViewChild,

44
00:03:59,321 --> 00:04:04,250
, а затем я смогу обратиться к feedbackForm,

45
00:04:04,250 --> 00:04:09,088
давая ему переменную шаблона с именем fform.

46
00:04:09,088 --> 00:04:14,698
Вы собираетесь сделать это на следующем шаге, а затем для этого

47
00:04:14,698 --> 00:04:19,770
я буду ссылаться на это, используя feedbackFormDirective.

48
00:04:21,890 --> 00:04:27,030
Таким образом, это позволяет нам получить доступ к шаблонной форме, а затем полностью сбросить

49
00:04:27,030 --> 00:04:34,200
, так что сама форма возвращается к своему первозданному значению.

50
00:04:34,200 --> 00:04:38,710
Таким образом, это еще один дополнительный шаг, который нам нужно сделать, чтобы форма была

51
00:04:38,710 --> 00:04:43,470
полностью сброшена до своего начального значения здесь.

52
00:04:43,470 --> 00:04:50,268
Теперь, сделав это в методе onSubject, после сброса самого объекта feedbackForm

53
00:04:53,241 --> 00:04:58,669
здесь, нам также нужно добавить

54
00:04:58,669 --> 00:05:06,242
в этом.feedbackFormDirective.resetForm ();

55
00:05:08,355 --> 00:05:10,060
Там.

56
00:05:10,060 --> 00:05:15,045
Таким образом, это гарантирует, что мой feedbackForm полностью сбрасывается до его первозданного значения

57
00:05:15,045 --> 00:05:18,400
на данный момент.

58
00:05:18,400 --> 00:05:23,273
Итак, после этих изменений давайте теперь перейти к нашему шаблону

59
00:05:23,273 --> 00:05:29,050
файл, чтобы показать, как мы можем отразить эти ошибки

60
00:05:29,050 --> 00:05:33,630
в нашем шаблоне для нашей формы там.

61
00:05:33,630 --> 00:05:35,730
Итак, переключившись на файл шаблона.

62
00:05:35,730 --> 00:05:39,490
Так что сначала мы перейдем к кнопке здесь, а

63
00:05:39,490 --> 00:05:44,705
потом сделаем кнопку Отключена.

64
00:05:46,924 --> 00:05:56,470
Если «feedbackForm недействителен».

65
00:05:56,470 --> 00:06:01,280
Таким образом, кнопка будет включена только тогда, когда feedbackForm действительна.

66
00:06:01,280 --> 00:06:06,403
Переходя к этой форме, позвольте мне добавить в

67
00:06:06,403 --> 00:06:15,674
<mat-errox*ngIF="feedbackForm.get» получить

68
00:06:18,727 --> 00:06:28,727
('firstname') .hasError ('required')

69
00:06:30,484 --> 00:06:31,577
&&

70
00:06:31,577 --> 00:06:40,875
feedbackForm.get ('firstname')

71
00:06:47,340 --> 00:06:54,588
.toud», и сообщение является обязательным.

72
00:06:56,040 --> 00:07:01,070
Так что это будет сообщение, которое вы назначаете, используя одну строку со скрытым,

73
00:07:01,070 --> 00:07:02,370
с этой информацией там.

74
00:07:04,710 --> 00:07:11,009
Позвольте мне применить то же самое к имени,

75
00:07:15,328 --> 00:07:20,007
телефонному номеру и электронной почте.

76
00:07:20,007 --> 00:07:25,736
Так что я просто собираюсь скопировать, и вставить, и отредактировать их,

77
00:07:25,736 --> 00:07:32,226
, чтобы вы могли продолжить с ними, и ('lastname').

78
00:07:36,243 --> 00:07:38,472
Фамилия.

79
00:07:38,472 --> 00:07:39,714
Тельнум.

80
00:07:39,714 --> 00:07:46,424
Поэтому я применяю это к ('telnum').

81
00:07:50,395 --> 00:07:53,948
Опять же, та же идея за этим, а затем также по электронной почте.

82
00:08:01,227 --> 00:08:01,970
('email').

83
00:08:05,976 --> 00:08:10,561
Добавим в форму переменную шаблона fform.

84
00:08:10,561 --> 00:08:16,460
Поэтому я набираю #fform ="ngForm».

85
00:08:16,460 --> 00:08:22,187
Перейдя к нашей форме в браузере, позвольте мне ввести имя

86
00:08:22,187 --> 00:08:28,240
, и вы видите, что даже если я удалю значение будет по-прежнему оставаться зеленым,

87
00:08:28,240 --> 00:08:31,501
, потому что мы использовали тронутый там.

88
00:08:31,501 --> 00:08:36,522
Но в тот момент, когда я отойду от него, вы

89
00:08:36,522 --> 00:08:42,586
сможете увидеть, что это становится красным цветом.

90
00:08:42,586 --> 00:08:47,659
Так же для фамилии вы увидите, что когда я

91
00:08:47,659 --> 00:08:54,020
удалю значение Фамилия, то это показано там аналогичным образом.

92
00:08:54,020 --> 00:08:57,710
Позвольте мне ввести имя и фамилию, а также для электронной почты.

93
00:08:59,736 --> 00:09:07,411
В, Тот же случай для телефонного номера также.

94
00:09:07,411 --> 00:09:12,287
Таким образом, вы можете сделать проверку формы в нашем приложении.

95
00:09:12,287 --> 00:09:16,943
С этим мы завершаем это упражнение, где мы добавили

96
00:09:16,943 --> 00:09:21,285
в нашу реактивную форму проверки формы.

97
00:09:21,285 --> 00:09:26,493
Это хорошее время для вас, чтобы сделать git commit с сообщением,

98
00:09:26,493 --> 00:09:28,750
reactive образует часть вторую.

99
00:09:28,750 --> 00:09:34,925
[МУЗЫКА]