1
00:00:00,000 --> 00:00:04,598
[МУЗЫКА]

2
00:00:04,598 --> 00:00:10,170
Время перейти к третьему заданию в этом курсе.

3
00:00:10,170 --> 00:00:13,410
В этом задании, как вы уже ожидали,

4
00:00:13,410 --> 00:00:17,190
мы будем смотреть на угловые формы и наблюдаемые.

5
00:00:17,190 --> 00:00:22,480
Это то, что мы узнали я в этом конкретном модуле курса.

6
00:00:22,480 --> 00:00:28,600
В этом задании вы будете проектировать форму

7
00:00:28,600 --> 00:00:33,440
в представлении компонентов детали блюда, которая позволит

8
00:00:33,440 --> 00:00:38,540
пользователям отправлять свои комментарии о конкретном блюде.

9
00:00:39,640 --> 00:00:45,504
Вы будете использовать угловые реактивные формы для проектирования формы и

10
00:00:45,504 --> 00:00:50,127
вы будете использовать изменения значений, наблюдаемые в

11
00:00:50,127 --> 00:00:53,623
, чтобы начать проверку формы,

12
00:00:53,623 --> 00:00:59,147
так же, как мы сделали в упражнении, которое вы только что завершили, и

13
00:00:59,147 --> 00:01:04,109
вы будете использовать новый компонент Angular материала под названием

14
00:01:04,109 --> 00:01:07,747
Angular Компонент ползунка материала.

15
00:01:07,747 --> 00:01:13,987
Компонент ползунка будет использоваться для ввода рейтинга для

16
00:01:13,987 --> 00:01:19,050
блюдо человеком, который отправляет счетчик.

17
00:01:20,230 --> 00:01:24,620
Давайте рассмотрим три задания в этом задании чуть более подробно.

18
00:01:26,410 --> 00:01:31,760
Так вот, я показываю вам свое первое блюдо из меню в порядке

19
00:01:31,760 --> 00:01:38,510
, чтобы проиллюстрировать вам три задачи, которые должны быть выполнены в этом задании.

20
00:01:38,510 --> 00:01:43,238
Таким образом, в этом задании мы создадим форму в

21
00:01:43,238 --> 00:01:48,594
раздел комментария вашего компонента детализации блюда.

22
00:01:48,594 --> 00:01:51,579
Форма содержит здесь два поля.

23
00:01:51,579 --> 00:01:55,122
Поле имени и поле комментария.

24
00:01:55,122 --> 00:02:00,570
В поле name имя автора комментария вводится пользователем.

25
00:02:00,570 --> 00:02:04,406
Затем в поле комментария, которое является текстовой областью,

26
00:02:04,406 --> 00:02:10,037
вы позволите автору ввести комментарий, который он хочет отправить.

27
00:02:10,037 --> 00:02:14,639
Кроме того, для того, чтобы получить рейтинг для блюда,

28
00:02:14,639 --> 00:02:22,010
мы будем использовать этот компонент углового материала, называемый угловым материалом слайдер.

29
00:02:22,010 --> 00:02:23,730
Для этого компонента ползунка

30
00:02:25,040 --> 00:02:30,260
ссылка на документацию предоставляется в дополнительных ресурсах.

31
00:02:30,260 --> 00:02:33,541
Компонент ползунка довольно прост для создания.

32
00:02:33,541 --> 00:02:38,788
Для этого компонента ползунка вы будете отображать деления, как это.

33
00:02:38,788 --> 00:02:43,033
Таким образом, вы можете видеть, что у вас есть один, два, три, четыре галочки уже и

34
00:02:43,033 --> 00:02:46,300
пятый прямо под этим большим пальцем здесь.

35
00:02:46,300 --> 00:02:49,943
Итак, а также когда вы показываете представление большого пальца,

36
00:02:49,943 --> 00:02:54,346
он покажет разрез в выбранном рейтинге, как.

37
00:02:59,650 --> 00:03:06,047
Таким образом, это должно быть помечено в угловой слайд компонента, который вы включаете

38
00:03:06,047 --> 00:03:12,252
в их шрифт, и это позволит вам выбрать рейтинг для блюда.

39
00:03:12,252 --> 00:03:15,820
Итак, это ваша первая задача в этом задании.

40
00:03:16,880 --> 00:03:22,530
Ваша вторая задача - добавить валидацию формы для этой формы.

41
00:03:22,530 --> 00:03:28,589
Теперь эта форма должна быть создана с использованием угловых реактивных шрифтов и

42
00:03:28,589 --> 00:03:34,200
также используя изменения значения наблюдаемых для того, чтобы наблюдать

43
00:03:34,200 --> 00:03:39,377
любые изменения в любой из этих элементов управления формы ее.

44
00:03:39,377 --> 00:03:44,226
И всякий раз, когда происходят какие-либо изменения, вы должны немедленно начать проверку формы

45
00:03:44,226 --> 00:03:48,831
, используя изменения значений, наблюдаемые точно так же, как мы делали в

46
00:03:48,831 --> 00:03:52,730
упражнение, которое вы только что завершили на предыдущем уроке.

47
00:03:54,650 --> 00:03:59,370
Теперь проверка, которую вам нужно выполнить, заключается в том, что как имя, так и

48
00:03:59,370 --> 00:04:02,020
комментарий являются обязательными полями.

49
00:04:02,020 --> 00:04:06,029
Кроме того, имя должно содержать не менее двух символов.

50
00:04:06,029 --> 00:04:11,671
Так что если я просто напечатаю один символ, то вы должны показать здесь сообщение о том, что

51
00:04:11,671 --> 00:04:15,283
Имя автора должно быть не менее двух символов.

52
00:04:15,283 --> 00:04:19,250
Теперь, если конечно, мы набираем больше, то это исчезнет.

53
00:04:19,250 --> 00:04:23,494
Если удалить имя полностью из поля,

54
00:04:23,494 --> 00:04:28,760
, то отображается сообщение о том, что имя автора является обязательным.

55
00:04:28,760 --> 00:04:31,985
Таким образом, требуемое сообщение должно быть отображено здесь.

56
00:04:31,985 --> 00:04:35,327
Таким образом, как только я набираю хотя бы два символа,

57
00:04:35,327 --> 00:04:38,610
тогда сообщение исчезнет.

58
00:04:38,610 --> 00:04:42,051
Теперь для поля комментария также это обязательное поле.

59
00:04:42,051 --> 00:04:46,029
Итак, вам нужно ввести хотя бы несколько символов.

60
00:04:46,029 --> 00:04:49,159
Нет ограничений по количеству символов.

61
00:04:49,159 --> 00:04:54,586
Но если ни один символ не вводится, когда вы отображаете сообщение здесь, говорящее,

62
00:04:54,586 --> 00:04:56,980
комментарий по мере необходимости.

63
00:04:56,980 --> 00:05:02,966
Если ваша форма в данный момент недействительна, то кнопка отправки не будет работать.

64
00:05:02,966 --> 00:05:08,006
Но как только ваша форма станет действительной, тогда ваша кнопка отправки будет работать, и

65
00:05:08,006 --> 00:05:10,707
должен позволить вам отправить шрифт.

66
00:05:10,707 --> 00:05:15,160
Итак, это вторая задача в вашем задании.

67
00:05:16,170 --> 00:05:23,060
Сложная задача в вашем задании заключается в том, что как только форма содержит действительную информацию,

68
00:05:23,060 --> 00:05:28,240
вы должны отобразить предварительный просмотр того, что вы только что отправил в форме.

69
00:05:28,240 --> 00:05:33,310
Позвольте мне ввести что-то более значимое здесь, так что они

70
00:05:33,310 --> 00:05:38,460
предварительный просмотр выглядит интересно.

71
00:05:38,460 --> 00:05:43,550
Таким образом, вы видите, что как только вы введете действительную информацию в свою форму,

72
00:05:43,550 --> 00:05:48,440
вы должны показать предварительный просмотр того, как будет выглядеть комментарий

73
00:05:48,440 --> 00:05:53,210
, если он будет добавлен в этот список комментариев к блюду.

74
00:05:53,210 --> 00:05:57,712
Теперь обратите внимание, что в предварительном просмотре дата пока не отображается.

75
00:05:57,712 --> 00:06:01,046
Итак, это еще одна вещь, которую вы должны иметь в виду.

76
00:06:01,046 --> 00:06:08,027
Если форма становится недействительной, предварительный просмотр исчезает.

77
00:06:08,027 --> 00:06:13,020
Но как только форма станет действительной, предварительный просмотр появится снова.

78
00:06:13,020 --> 00:06:18,850
Итак, это то, что вы должны разработать соответствующим образом, используя список ND и

79
00:06:18,850 --> 00:06:26,190
, а затем убедиться, что форма действительна, прежде чем отображать эту информацию там.

80
00:06:26,190 --> 00:06:27,044
Итак, это предварительный просмотр.

81
00:06:27,044 --> 00:06:30,676
Теперь, когда пользователь нажимает на кнопку Отправить,

82
00:06:30,676 --> 00:06:34,370
, то есть несколько вещей, которые вам нужно сделать.

83
00:06:34,370 --> 00:06:39,344
Когда пользователь нажимает на кнопку Отправить, то этот комментарий будет добавлен

84
00:06:39,344 --> 00:06:44,589
в список комментариев, которые у вас есть для данного конкретного блюда.

85
00:06:44,589 --> 00:06:50,943
Итак, позвольте мне нажать на кнопку отправки и вы сразу заметите, что форма

86
00:06:50,943 --> 00:06:56,490
была добавлена в список комментариев для этого конкретного блюда.

87
00:06:56,490 --> 00:07:01,349
Итак, вы видите, что последний комментарий, который я только что ввел, был добавлен здесь.

88
00:07:01,349 --> 00:07:05,632
Также обратите внимание, что дата для

89
00:07:05,632 --> 00:07:13,140
формы была добавлена в комментарий здесь.

90
00:07:13,140 --> 00:07:18,612
Таким образом, вы должны взять значения из модели формы и

91
00:07:18,612 --> 00:07:24,084
затем скопировать его в модель данных, а затем вы нажимаете комментарий

92
00:07:24,084 --> 00:07:30,009
в луч комментариев объекта JavaScript для объекта dish.

93
00:07:30,009 --> 00:07:34,553
Итак, это то, что вам нужно сделать, используя метод push массива для массива объектов

94
00:07:34,553 --> 00:07:36,960
JavaScript.

95
00:07:36,960 --> 00:07:41,534
Кроме того, дата должна быть автоматически настроена и

96
00:07:41,534 --> 00:07:43,574
добавлена в эту модель данных.

97
00:07:43,574 --> 00:07:48,510
Помните, что модель формы не содержит даты, но

98
00:07:48,510 --> 00:07:54,800
модель данных, которая является производной от класса комментариев, который мы разработали,

99
00:07:54,800 --> 00:08:01,500
модель данных содержит автора, рейтинг, комментарий и дату.

100
00:08:01,500 --> 00:08:05,642
Итак, вам нужно добавить дату в модель данных.

101
00:08:05,642 --> 00:08:11,261
Итак, здесь вы будете использовать класс даты Java Script

102
00:08:11,261 --> 00:08:16,370
вместе с преобразованием его в строку ISO

103
00:08:16,370 --> 00:08:24,060
, прежде чем хранить в поле даты модели данных комментария.

104
00:08:24,060 --> 00:08:29,164
Теперь я предоставил вам ссылки на примеры того, как вы можете

105
00:08:29,164 --> 00:08:34,268
создать дату и как вы cab преобразовать дату в строку ISO

106
00:08:34,268 --> 00:08:39,148
в документации по этому назначению,

107
00:08:39,148 --> 00:08:44,158
, а также в дополнительных ресурсах для этого элемента.

108
00:08:44,158 --> 00:08:52,530
Итак, пожалуйста, посмотрите, чтобы понять, как вы должны добавить дату в это поле комментария там.

109
00:08:52,530 --> 00:08:56,989
И как только комментарий попадет в массив комментариев,

110
00:08:56,989 --> 00:09:02,176
тогда он присоединится к остальным комментариям для этого конкретного блюда.

111
00:09:02,176 --> 00:09:06,600
Вы должны помнить, что мы не сохраняем это на стороне сервера,

112
00:09:06,600 --> 00:09:09,129
потому что у нас нет серверной стороны.

113
00:09:09,129 --> 00:09:13,330
Поэтому, если вы перезагрузите страницу, этот комментарий исчезнет.

114
00:09:13,330 --> 00:09:15,040
Это вполне приемлемо.

115
00:09:15,040 --> 00:09:19,417
На данном этапе мы не пытаемся сохранить изменения

116
00:09:19,417 --> 00:09:23,810
блюдо обратно на сервер через наш сервис блюд.

117
00:09:23,810 --> 00:09:27,542
Это мы сделаем в одном из последующих циклов.

118
00:09:27,542 --> 00:09:31,811
Итак, в данный момент, если вы перезагрузите эту страницу, комментарий, который вы только что вводите, исчезнет

119
00:09:31,811 --> 00:09:35,240
, но это вполне приемлемо.

120
00:09:35,240 --> 00:09:38,670
Итак, это третья задача в вашем задании.

121
00:09:39,720 --> 00:09:45,197
После выполнения всех трех задач убедитесь, что все работает

122
00:09:45,197 --> 00:09:50,602
правильно, прежде чем отправлять решение назначения в их систему.

123
00:09:50,602 --> 00:09:54,269
[МУЗЫКА]