1
00:00:03,170 --> 00:00:05,820
Теперь, когда мы узнали о поддержке валидации формы

2
00:00:05,820 --> 00:00:11,165
на основе шаблонов в Angular в предыдущей лекции,

3
00:00:11,165 --> 00:00:14,625
давайте применим то, что мы узнали, к

4
00:00:14,625 --> 00:00:18,330
форму входа, которую мы разработали в предыдущем упражнении.

5
00:00:18,330 --> 00:00:21,395
Мы сделаем простую проверку формы для входа в систему.

6
00:00:21,395 --> 00:00:26,160
В частности, мы будем указывать имя пользователя и пароль по мере необходимости,

7
00:00:26,160 --> 00:00:32,430
, а затем проверить, чтобы пользователь вводил информацию в эти поля,

8
00:00:32,430 --> 00:00:37,125
и иметь возможность отображать сообщения об ошибках, когда поля пустые.

9
00:00:37,125 --> 00:00:46,180
Давайте продолжим эту модификацию приложения в этом упражнении.

10
00:00:46,180 --> 00:00:49,215
Чтобы начать это упражнение,

11
00:00:49,215 --> 00:00:53,600
давайте перейдем к форме входа здесь,

12
00:00:53,600 --> 00:00:57,090
, что у нас есть в шаблоне компонентов входа здесь.

13
00:00:57,090 --> 00:01:02,400
Мы уже добавили атрибут novalidate в форму входа.

14
00:01:02,400 --> 00:01:10,780
Итак, давайте добавим в шаблон переменную loginForm к этому шаблону

15
00:01:10,780 --> 00:01:18,835
, а затем установим это в ngForm, как мы поняли из предыдущей лекции здесь.

16
00:01:18,835 --> 00:01:20,170
Таким образом, делая это,

17
00:01:20,170 --> 00:01:26,500
мы указываем, что эта переменная шаблона позволяет нам отслеживать состояние формы.

18
00:01:26,500 --> 00:01:31,330
Таким образом, мы можем даже проверить действительное или недопустимое состояние для этой формы.

19
00:01:31,330 --> 00:01:34,485
Теперь, кроме того, для каждого из этих входов

20
00:01:34,485 --> 00:01:43,620
мы также будем аналогичным образом добавлять в соответствующие переменные шаблона здесь.

21
00:01:43,620 --> 00:01:45,220
Итак, позвольте мне перейти к следующей строке здесь,

22
00:01:45,220 --> 00:01:52,670
и там я скажу имя пользователя ngModel.

23
00:01:52,670 --> 00:01:58,360
Затем мы также уточним это, как это требуется здесь.

24
00:01:58,360 --> 00:02:00,660
Аналогично, для пароля

25
00:02:00,660 --> 00:02:09,545
мы добавим в соответствующую переменную шаблона здесь, как пароль находится в ngModel,

26
00:02:09,545 --> 00:02:15,700
, а затем укажите это, как это требуется здесь.

27
00:02:15,700 --> 00:02:19,700
Итак, теперь, когда мы указали переменные шаблона,

28
00:02:19,700 --> 00:02:23,870
мы можем провести некоторые проверки формы здесь.

29
00:02:23,870 --> 00:02:26,490
Теперь, поскольку мы указываем это по мере необходимости,

30
00:02:26,490 --> 00:02:28,280
это означает, что если эти поля,

31
00:02:28,280 --> 00:02:30,455
поля ввода пусты,

32
00:02:30,455 --> 00:02:34,525
то требуемая ошибка будет помечена для этого.

33
00:02:34,525 --> 00:02:40,105
Аналогично, теперь, когда у нас есть переменная шаблона для формы,

34
00:02:40,105 --> 00:02:47,380
мы можем легко использовать это, чтобы проверить и отключить кнопку Submit ниже.

35
00:02:47,380 --> 00:02:49,255
Итак, для кнопки Отправить,

36
00:02:49,255 --> 00:02:53,270
то, что мы здесь делаем, это использовать

37
00:02:53,270 --> 00:03:01,080
отключенное поле здесь,

38
00:03:01,080 --> 00:03:03,500
, а затем мы установим отключенное поле

39
00:03:03,500 --> 00:03:12,270
в loginForm.form.invalid.

40
00:03:12,270 --> 00:03:14,030
Таким образом, делая это,

41
00:03:14,030 --> 00:03:18,030
мы будем отключать эту кнопку, когда форма недействительна.

42
00:03:18,030 --> 00:03:23,925
Таким образом, пользователь не может даже отправить форму, если форма содержит недопустимую запись.

43
00:03:23,925 --> 00:03:27,355
Так, например, если имя пользователя пусто или пароль пуст,

44
00:03:27,355 --> 00:03:29,520
, то форма входа будет недействительной,

45
00:03:29,520 --> 00:03:32,290
и поэтому пользователь не может отправить эту форму.

46
00:03:32,290 --> 00:03:36,950
Теперь это одна часть проверки формы, которую мы можем сделать,

47
00:03:36,950 --> 00:03:40,385
, посредством которой мы можем предотвратить подавление формы.

48
00:03:40,385 --> 00:03:43,285
Кроме того, для каждого из этих полей

49
00:03:43,285 --> 00:03:47,945
мы даже можем отобразить сообщение об ошибке

50
00:03:47,945 --> 00:03:53,875
указать, какая ошибка происходит в этом конкретном поле.

51
00:03:53,875 --> 00:03:55,309
Итак, чтобы сделать это,

52
00:03:55,309 --> 00:03:58,230
к каждому из этих элементов поля формы,

53
00:03:58,230 --> 00:04:07,650
мы добавим в тег mat-error там,

54
00:04:07,650 --> 00:04:12,270
, а затем мы скажем stop ngIf,

55
00:04:12,270 --> 00:04:18,345
и скажем username.errors.

56
00:04:18,345 --> 00:04:23,920
Итак, обратите внимание, что мы уже дали этому шаблону переменную с именем username,

57
00:04:23,920 --> 00:04:28,665
, чтобы мы могли использовать в username.errors, если есть ошибки, и

58
00:04:28,665 --> 00:04:34,930
, если этот тип ошибки требуется.

59
00:04:34,930 --> 00:04:41,810
Итак, если ошибка является обязательным типом ошибки, которая вызывает там,

60
00:04:41,810 --> 00:04:44,060
то в этот момент

61
00:04:44,060 --> 00:04:54,140
мы можем указать, что соответствующая ошибка будет отображаться имя пользователя требуется.

62
00:04:54,140 --> 00:04:59,305
Итак, это ошибка, которая будет отображаться для этого поля здесь.

63
00:04:59,305 --> 00:05:03,810
Аналогичным образом, позвольте мне добавить то же самое для поля пароля здесь.

64
00:05:03,810 --> 00:05:06,610
Итак, позвольте мне скопировать это, а затем вставить его здесь,

65
00:05:06,610 --> 00:05:09,110
, а затем мы скажем password.errors.

66
00:05:09,110 --> 00:05:17,395
Тогда сообщение будет пароль требуется.

67
00:05:17,395 --> 00:05:19,070
Таким образом, добавив это,

68
00:05:19,070 --> 00:05:22,535
мы будем отображать сообщения об ошибках ниже

69
00:05:22,535 --> 00:05:27,665
эти поля, когда поле не содержит никакой информации.

70
00:05:27,665 --> 00:05:29,950
Незначительное исправление здесь.

71
00:05:29,950 --> 00:05:34,820
Это должно быть имя пользователя?errors.readable здесь,

72
00:05:34,820 --> 00:05:38,470
и аналогичным образом, этот также должен быть.readable здесь.

73
00:05:38,470 --> 00:05:40,375
Таким образом, с этими изменениями

74
00:05:40,375 --> 00:05:43,280
мой компонент входа теперь готов

75
00:05:43,280 --> 00:05:47,275
для проверки формы, а затем отображения сообщений об ошибках.

76
00:05:47,275 --> 00:05:52,505
Итак, давайте сохраним изменения, а затем пойдем и посмотрим на обновленное приложение.

77
00:05:52,505 --> 00:05:55,705
Перейдя в наше приложение в браузере,

78
00:05:55,705 --> 00:05:58,475
откроем здесь форму входа.

79
00:05:58,475 --> 00:06:01,720
Итак, вы можете видеть, что теперь как имя пользователя, так и пароль несут

80
00:06:01,720 --> 00:06:05,355
звезду там, чтобы указать, что они оба обязательны.

81
00:06:05,355 --> 00:06:07,550
Итак, позвольте мне ввести.

82
00:06:09,870 --> 00:06:16,130
Итак, здесь вы видите, что форма действительна, потому что она содержит информацию,

83
00:06:16,130 --> 00:06:20,375
и поэтому кнопка Login будет включена.

84
00:06:20,375 --> 00:06:24,840
Позвольте мне удалить информацию из поля пароля

85
00:06:24,840 --> 00:06:27,950
, а затем вы сразу заметите, что

86
00:06:27,950 --> 00:06:32,405
здесь указана ошибка, указывающая, что пароль требуется.

87
00:06:32,405 --> 00:06:37,040
Также обратите внимание, что кнопка Login больше не будет включена.

88
00:06:37,040 --> 00:06:40,760
Он будет отключен. Таким образом, вы не сможете отправить форму здесь.

89
00:06:40,760 --> 00:06:43,960
Но в тот момент, когда я введу что-то в пароль,

90
00:06:43,960 --> 00:06:47,060
, тогда кнопка Login будет включена,

91
00:06:47,060 --> 00:06:49,670
и мы сможем отправить форму здесь.

92
00:06:49,670 --> 00:06:51,390
Аналогично для имени пользователя.

93
00:06:51,390 --> 00:06:55,045
Если я удалю информацию об имени пользователя там,

94
00:06:55,045 --> 00:06:58,115
, то вы увидите ошибку, отображаемую здесь,

95
00:06:58,115 --> 00:07:04,670
, а также вы увидите, что кнопка входа в данный момент не включена.

96
00:07:04,670 --> 00:07:10,270
Итак, вот как в этом случае может быть проведена проверка формы.

97
00:07:10,270 --> 00:07:12,170
Итак, как вы видели,

98
00:07:12,170 --> 00:07:15,960
, добавив в простой форме валидацию в наше приложение,

99
00:07:15,960 --> 00:07:18,515
мы можем проверить, чтобы убедиться, что

100
00:07:18,515 --> 00:07:22,925
поля содержат информацию, которую они должны содержать,

101
00:07:22,925 --> 00:07:24,725
и в правильном формате.

102
00:07:24,725 --> 00:07:30,290
Мы рассмотрим немного больше проверки формы в одном из последующих упражнений,

103
00:07:30,290 --> 00:07:33,020
особенно для реактивных форм.

104
00:07:33,020 --> 00:07:35,945
С этим мы завершаем это упражнение.

105
00:07:35,945 --> 00:07:38,840
Это хорошее время для вас, чтобы сделать git commit

106
00:07:38,840 --> 00:07:43,080
с помощью форм, управляемых шаблонами сообщений, часть вторая.