[МУЗЫКА]
Время перейти к третьему заданию в этом курсе.
В этом задании, как вы уже ожидали,
мы будем смотреть на угловые формы и наблюдаемые.
Это то, что мы узнали я в этом конкретном модуле курса.
В этом задании вы будете проектировать форму
в представлении компонентов детали блюда, которая позволит
пользователям отправлять свои комментарии о конкретном блюде.
Вы будете использовать угловые реактивные формы для проектирования формы и
вы будете использовать изменения значений, наблюдаемые в
, чтобы начать проверку формы,
так же, как мы сделали в упражнении, которое вы только что завершили, и
вы будете использовать новый компонент Angular материала под названием
Angular Компонент ползунка материала.
Компонент ползунка будет использоваться для ввода рейтинга для
блюдо человеком, который отправляет счетчик.
Давайте рассмотрим три задания в этом задании чуть более подробно.
Так вот, я показываю вам свое первое блюдо из меню в порядке
, чтобы проиллюстрировать вам три задачи, которые должны быть выполнены в этом задании.
Таким образом, в этом задании мы создадим форму в
раздел комментария вашего компонента детализации блюда.
Форма содержит здесь два поля.
Поле имени и поле комментария.
В поле name имя автора комментария вводится пользователем.
Затем в поле комментария, которое является текстовой областью,
вы позволите автору ввести комментарий, который он хочет отправить.
Кроме того, для того, чтобы получить рейтинг для блюда,
мы будем использовать этот компонент углового материала, называемый угловым материалом слайдер.
Для этого компонента ползунка
ссылка на документацию предоставляется в дополнительных ресурсах.
Компонент ползунка довольно прост для создания.
Для этого компонента ползунка вы будете отображать деления, как это.
Таким образом, вы можете видеть, что у вас есть один, два, три, четыре галочки уже и
пятый прямо под этим большим пальцем здесь.
Итак, а также когда вы показываете представление большого пальца,
он покажет разрез в выбранном рейтинге, как.
Таким образом, это должно быть помечено в угловой слайд компонента, который вы включаете
в их шрифт, и это позволит вам выбрать рейтинг для блюда.
Итак, это ваша первая задача в этом задании.
Ваша вторая задача - добавить валидацию формы для этой формы.
Теперь эта форма должна быть создана с использованием угловых реактивных шрифтов и
также используя изменения значения наблюдаемых для того, чтобы наблюдать
любые изменения в любой из этих элементов управления формы ее.
И всякий раз, когда происходят какие-либо изменения, вы должны немедленно начать проверку формы
, используя изменения значений, наблюдаемые точно так же, как мы делали в
упражнение, которое вы только что завершили на предыдущем уроке.
Теперь проверка, которую вам нужно выполнить, заключается в том, что как имя, так и
комментарий являются обязательными полями.
Кроме того, имя должно содержать не менее двух символов.
Так что если я просто напечатаю один символ, то вы должны показать здесь сообщение о том, что
Имя автора должно быть не менее двух символов.
Теперь, если конечно, мы набираем больше, то это исчезнет.
Если удалить имя полностью из поля,
, то отображается сообщение о том, что имя автора является обязательным.
Таким образом, требуемое сообщение должно быть отображено здесь.
Таким образом, как только я набираю хотя бы два символа,
тогда сообщение исчезнет.
Теперь для поля комментария также это обязательное поле.
Итак, вам нужно ввести хотя бы несколько символов.
Нет ограничений по количеству символов.
Но если ни один символ не вводится, когда вы отображаете сообщение здесь, говорящее,
комментарий по мере необходимости.
Если ваша форма в данный момент недействительна, то кнопка отправки не будет работать.
Но как только ваша форма станет действительной, тогда ваша кнопка отправки будет работать, и
должен позволить вам отправить шрифт.
Итак, это вторая задача в вашем задании.
Сложная задача в вашем задании заключается в том, что как только форма содержит действительную информацию,
вы должны отобразить предварительный просмотр того, что вы только что отправил в форме.
Позвольте мне ввести что-то более значимое здесь, так что они
предварительный просмотр выглядит интересно.
Таким образом, вы видите, что как только вы введете действительную информацию в свою форму,
вы должны показать предварительный просмотр того, как будет выглядеть комментарий
, если он будет добавлен в этот список комментариев к блюду.
Теперь обратите внимание, что в предварительном просмотре дата пока не отображается.
Итак, это еще одна вещь, которую вы должны иметь в виду.
Если форма становится недействительной, предварительный просмотр исчезает.
Но как только форма станет действительной, предварительный просмотр появится снова.
Итак, это то, что вы должны разработать соответствующим образом, используя список ND и
, а затем убедиться, что форма действительна, прежде чем отображать эту информацию там.
Итак, это предварительный просмотр.
Теперь, когда пользователь нажимает на кнопку Отправить,
, то есть несколько вещей, которые вам нужно сделать.
Когда пользователь нажимает на кнопку Отправить, то этот комментарий будет добавлен
в список комментариев, которые у вас есть для данного конкретного блюда.
Итак, позвольте мне нажать на кнопку отправки и вы сразу заметите, что форма
была добавлена в список комментариев для этого конкретного блюда.
Итак, вы видите, что последний комментарий, который я только что ввел, был добавлен здесь.
Также обратите внимание, что дата для
формы была добавлена в комментарий здесь.
Таким образом, вы должны взять значения из модели формы и
затем скопировать его в модель данных, а затем вы нажимаете комментарий
в луч комментариев объекта JavaScript для объекта dish.
Итак, это то, что вам нужно сделать, используя метод push массива для массива объектов
JavaScript.
Кроме того, дата должна быть автоматически настроена и
добавлена в эту модель данных.
Помните, что модель формы не содержит даты, но
модель данных, которая является производной от класса комментариев, который мы разработали,
модель данных содержит автора, рейтинг, комментарий и дату.
Итак, вам нужно добавить дату в модель данных.
Итак, здесь вы будете использовать класс даты Java Script
вместе с преобразованием его в строку ISO
, прежде чем хранить в поле даты модели данных комментария.
Теперь я предоставил вам ссылки на примеры того, как вы можете
создать дату и как вы cab преобразовать дату в строку ISO
в документации по этому назначению,
, а также в дополнительных ресурсах для этого элемента.
Итак, пожалуйста, посмотрите, чтобы понять, как вы должны добавить дату в это поле комментария там.
И как только комментарий попадет в массив комментариев,
тогда он присоединится к остальным комментариям для этого конкретного блюда.
Вы должны помнить, что мы не сохраняем это на стороне сервера,
потому что у нас нет серверной стороны.
Поэтому, если вы перезагрузите страницу, этот комментарий исчезнет.
Это вполне приемлемо.
На данном этапе мы не пытаемся сохранить изменения
блюдо обратно на сервер через наш сервис блюд.
Это мы сделаем в одном из последующих циклов.
Итак, в данный момент, если вы перезагрузите эту страницу, комментарий, который вы только что вводите, исчезнет
, но это вполне приемлемо.
Итак, это третья задача в вашем задании.
После выполнения всех трех задач убедитесь, что все работает
правильно, прежде чем отправлять решение назначения в их систему.
[МУЗЫКА]