1
00:00:04,070 --> 00:00:10,290
Мы только что завершили изучение угловых форм, управляемых шаблонами, а также,

2
00:00:10,290 --> 00:00:14,300
в упражнении, построили нашу первую форму, управляемую шаблоном.

3
00:00:14,300 --> 00:00:18,210
Теперь, когда пользователь вводит информацию в поля формы,

4
00:00:18,210 --> 00:00:23,655
мы можем проверить данные, которые пользователь вводит в эти поля данных.

5
00:00:23,655 --> 00:00:25,630
В первые дни работы в Интернете

6
00:00:25,630 --> 00:00:28,950
единственным способом проверки данных было отправить данные

7
00:00:28,950 --> 00:00:32,580
на сервер, а затем выполнить проверки на стороне сервера,

8
00:00:32,580 --> 00:00:37,155
, а затем получить результат со стороны сервера.

9
00:00:37,155 --> 00:00:41,935
Но в наши дни, с мощными клиентскими фреймворками, такими как Angular,

10
00:00:41,935 --> 00:00:46,580
большая часть проверки данных может быть легко выполнена на стороне клиента

11
00:00:46,580 --> 00:00:52,070
, и мы можем легко поймать много ошибок на стороне клиента,

12
00:00:52,070 --> 00:00:56,885
, а затем даже предоставить указание пользователю об ошибках.

13
00:00:56,885 --> 00:01:00,170
Теперь, здесь мы рассмотрим угловую поддержку для проверки формы

14
00:01:00,170 --> 00:01:03,725
, а затем, как мы можем проводить проверку формы,

15
00:01:03,725 --> 00:01:11,170
, а затем показывать сообщения об ошибках пользователю в представлениях.

16
00:01:11,260 --> 00:01:17,455
HTML5 уже поставляется с встроенной поддержкой проверки формы.

17
00:01:17,455 --> 00:01:20,750
Но когда мы используем Angular для нашего приложения,

18
00:01:20,750 --> 00:01:23,840
мы должны сначала отключить проверку формы HTML5,

19
00:01:23,840 --> 00:01:25,640
, чтобы ответственность за выполнение проверки формы

20
00:01:25,640 --> 00:01:29,750
перешла на угловое приложение.

21
00:01:29,750 --> 00:01:32,240
Итак, чтобы сделать это для формы,

22
00:01:32,240 --> 00:01:34,525
, как мы видели в упражнении ранее,

23
00:01:34,525 --> 00:01:40,760
мы включаем атрибут novalidate к тегу формы там,

24
00:01:40,760 --> 00:01:43,910
так, что это гарантирует, что угловой

25
00:01:43,910 --> 00:01:47,585
берет на себя ответственность за выполнение проверки формы.

26
00:01:47,585 --> 00:01:50,645
Как Angular помогает нам выполнить проверку формы?

27
00:01:50,645 --> 00:01:55,324
Это то, что мы рассмотрим подробнее дальше.

28
00:01:55,324 --> 00:01:59,600
Всякий раз, когда вам нужно выполнить проверку формы в Angular,

29
00:01:59,600 --> 00:02:05,570
, особенно когда вам нужно ссылаться на поля формы в вашем шаблоне,

30
00:02:05,570 --> 00:02:09,960
вам нужна помощь ссылочных переменных углового шаблона.

31
00:02:09,960 --> 00:02:12,725
Как указать ссылочную переменную шаблона?

32
00:02:12,725 --> 00:02:15,485
Балочная переменная шаблона может быть указана для

33
00:02:15,485 --> 00:02:19,235
любого элемента, связывая переменную шаблона подобным образом.

34
00:02:19,235 --> 00:02:22,880
Например, в данном случае для формы

35
00:02:22,880 --> 00:02:29,760
мы указываем форму входа, равную ngForm.

36
00:02:29,760 --> 00:02:33,160
Аналогично, для поля ввода, например,

37
00:02:33,160 --> 00:02:35,050
вы бы сказали косой чертой,

38
00:02:35,050 --> 00:02:39,725
или скорее #username равно ngModel.

39
00:02:39,725 --> 00:02:46,130
В этом случае форма входа и имя пользователя являются ссылочными переменными шаблона.

40
00:02:46,130 --> 00:02:49,370
Эти эталонные переменные могут быть использованы в

41
00:02:49,370 --> 00:02:53,800
наш Угловой шаблон для ссылки на эти поля.

42
00:02:53,800 --> 00:02:56,245
Итак, в самом шаблоне

43
00:02:56,245 --> 00:02:59,060
вы можете проверить состояния управления для

44
00:02:59,060 --> 00:03:03,289
те поля, включая такие вещи, как допустимое поле,

45
00:03:03,289 --> 00:03:04,760
является ли оно грязным,

46
00:03:04,760 --> 00:03:06,430
или имеет некоторые ошибки.

47
00:03:06,430 --> 00:03:12,865
Мы будем использовать эту поддержку, которую предоставляет Angular, чтобы сделать проверку формы.

48
00:03:12,865 --> 00:03:15,964
Как я уже упоминал, мы будем использовать

49
00:03:15,964 --> 00:03:21,870
эталонные переменные шаблона для сбора состояния управления для проверки информации.

50
00:03:21,870 --> 00:03:27,370
Так, например, вы можете сказать username.pristine в своем шаблоне.

51
00:03:27,370 --> 00:03:30,440
Итак, это относится к проверке состояния,

52
00:03:30,440 --> 00:03:33,960
, находится ли конкретный элемент управления в первозданном состоянии,

53
00:03:33,960 --> 00:03:39,080
означает, что он не был тронут и изменен пользователем до сих пор.

54
00:03:39,080 --> 00:03:41,840
Грязные противоположны первозданной,

55
00:03:41,840 --> 00:03:45,050
, что означает, что когда поле грязное,

56
00:03:45,050 --> 00:03:49,105
то это означает, что поле было изменено пользователем в прошлом.

57
00:03:49,105 --> 00:03:53,090
Аналогично, допустимое и недопустимое состояние управления

58
00:03:53,090 --> 00:03:58,295
позволяет нам проверить, является ли информация в этом поле действительной или недействительной,

59
00:03:58,295 --> 00:04:02,360
в зависимости от спецификации проверки

60
00:04:02,360 --> 00:04:06,530
для действительности или недопустимого состояния данного конкретного поля.

61
00:04:06,530 --> 00:04:11,990
Так, например, вы можете проверить, объявлены ли поля по мере необходимости,

62
00:04:11,990 --> 00:04:14,930
, что означает, что пользователь

63
00:04:14,930 --> 00:04:18,790
вводит хотя бы некоторую информацию в поле.

64
00:04:18,790 --> 00:04:24,280
Отсутствие информации в поле в вашей форме означает, что поле является недействительным.

65
00:04:24,280 --> 00:04:28,670
Аналогичным образом, вы можете указать материковую часть или максимальную длину значения поля

66
00:04:28,670 --> 00:04:31,970
, чтобы вы могли легко проверить, является ли количество символов

67
00:04:31,970 --> 00:04:35,500
в поле относительно основной длины,

68
00:04:35,500 --> 00:04:37,660
или ниже максимальной длины и так далее.

69
00:04:37,660 --> 00:04:39,380
В следующем упражнении

70
00:04:39,380 --> 00:04:42,740
мы применим эти различные подходы к проверке формы для

71
00:04:42,740 --> 00:04:47,080
нашей формы, управляемой шаблоном, которая была разработана в предыдущем упражнении.

72
00:04:47,080 --> 00:04:51,564
Например, в вашей форме

73
00:04:51,564 --> 00:04:54,170
вы можете отключить кнопку отправки, проверив на

74
00:04:54,170 --> 00:04:56,770
посмотреть, находится ли эта форма в действительном состоянии или нет.

75
00:04:56,770 --> 00:05:00,650
Таким образом, в этом случае вы свяжете отключенный

76
00:05:00,650 --> 00:05:05,875
и установите его равным login form.form.invalid,

77
00:05:05,875 --> 00:05:07,970
означает, что когда форма недействительна,

78
00:05:07,970 --> 00:05:10,480
эта кнопка будет отключена в этом случае.

79
00:05:10,480 --> 00:05:15,910
Таким образом, пользователю не будет разрешено передавать информацию через эту конкретную форму.

80
00:05:15,910 --> 00:05:18,995
Итак, это один из способов обеспечения того, чтобы

81
00:05:18,995 --> 00:05:22,700
неверные записи не будут отправлены пользователем через форму.

82
00:05:22,700 --> 00:05:25,100
Аналогично, для определенных полей

83
00:05:25,100 --> 00:05:30,080
вы можете проверить, заполнено ли поле или нет.

84
00:05:30,080 --> 00:05:33,125
Итак, если вы укажете, что конкретное поле является обязательным

85
00:05:33,125 --> 00:05:36,620
, указав необходимый атрибут для поля ввода,

86
00:05:36,620 --> 00:05:39,320
, то вы можете проверить, есть ли ошибка

87
00:05:39,320 --> 00:05:43,250
требуемого типа, поднятого для конкретного элемента поля.

88
00:05:43,250 --> 00:05:45,020
Итак, в вашем коде, например,

89
00:05:45,020 --> 00:05:47,390
вы даже можете указать, чтобы информировать пользователя о

90
00:05:47,390 --> 00:05:51,035
о том, что конкретное поле неверно.

91
00:05:51,035 --> 00:05:56,885
Вы используете mat-error, чтобы обозначить это.

92
00:05:56,885 --> 00:06:01,230
Итак, тег mat-error, который приходит из,

93
00:06:01,230 --> 00:06:06,555
снова, поддержка углового материала формы, как вы видите здесь,

94
00:06:06,555 --> 00:06:09,195
если ngIf оказывается истинным,

95
00:06:09,195 --> 00:06:15,560
то это сообщение будет отображаться ниже в поле ввода там,

96
00:06:15,560 --> 00:06:17,100
и аналогично поле ввода,

97
00:06:17,100 --> 00:06:20,405
будет помечен красным на экране.

98
00:06:20,405 --> 00:06:25,085
Итак, это то, что вы собираетесь проверять и

99
00:06:25,085 --> 00:06:30,000
, обеспечивая, а также доставляя сообщения об ошибках пользователю.

100
00:06:30,000 --> 00:06:31,740
В следующем упражнении

101
00:06:31,740 --> 00:06:35,980
мы применим этот подход для проверки имени пользователя и пароля.

102
00:06:35,980 --> 00:06:40,700
Укажем, что эти поля являются обязательными, и если пользователь

103
00:06:40,700 --> 00:06:45,565
не вводит никакой информации в эти поля после того, как поле было затронуто,

104
00:06:45,565 --> 00:06:51,210
, то мы гарантируем, что соответствующее сообщение об ошибке отображается пользователю.

105
00:06:51,210 --> 00:06:57,469
Итак, с этим быстрым пониманием проверки формы в Angular,

106
00:06:57,469 --> 00:06:58,970
давайте перейдем к упражнению,

107
00:06:58,970 --> 00:07:03,410
, где мы проверим, как мы можем сделать простую проверку формы для

108
00:07:03,410 --> 00:07:08,160
нашу форму входа, а затем иметь возможность отображать сообщения об ошибках.

109
00:07:08,160 --> 00:07:12,470
Мы снова вернемся для проверки формы в одном из последующих упражнений

110
00:07:12,470 --> 00:07:19,660
после того, как мы узнали больше о реактивной поддержке в Angular.