[MUSIC]
Time to move on to the third assignment in this course.
In this assignment, as you might have already expected,
we will be looking at Angular forms and observables.
That is what we learnt i n this particular module of the course.
In this assignment, you will be designing a form
within the dish detail components view that will enable
the users to submit their comment about a specific dish.
You will be using Angular reactive forms to design the form and
you will be using the value changes observable in
order to initiate form validation,
just like we did in the exercise that you just completed and
you will use a new Angular material component called
Angular Material Slider Component.
The slider component will be used to input the rating for
the dish by the person who submits the count.
Let's look at the three tasks in this assignment in a bit more detail.
So here, I am showing you their first dish from the menu in order
to illustrate to you the three tasks that need to be completed in this assignment.
So in this assignment, we will create a form in
the comment section of your dish detail component.
The form contains two fields here.
The name field and a comment field.
In the name field, the author's name for the comment will be entered by the user.
Then in their comment field which is a text area,
you will allow the author to enter the comment that they want to submit.
In addition, in order to get the rating for the dish,
we will use this Angular material component called angular material slider.
For this slider component,
a link to the documentation is provided in the additional resources.
The slider component is fairly straightforward to create.
For this slider component, you will display the tick marks like this.
So you can see that you have one, two, three, four tick marks already and
the fifth one is right under this thumb here.
So and also when you show the thumb view,
it will show the cut in selected rating like the.
So, this have to be labelled in Angular slide of component that you include
into their font and this will allow you to select the rating for the dish.
So, this is your first task in this assignment.
Your second task is to add form validation for this form.
Now this form should be created using Angular reactive fonts and
also using the value changes observable in order to observe
any changes to any of these form control elements her.
And whenever any change occurs, you should immediately initiate form
validation using the value changes observable just the way we did in
the exercise you just completed in the previous lesson.
Now, the validation that you need to perform is that both the name and
the comment are required fields.
Furthermore, the name should contain at least two characters.
So if I just type in one character, then you should show a message here saying,
Author Name must be at least two characters long.
Now if of course, we type in more, then that will disappear.
If you remove the name completely from the field,
then you display a message saying, Author Name is required.
So, the required message should be displayed here.
So as soon as I type in at least two characters,
then the message will disappear.
Now for the comment field also, this is a required field.
So, you need to type in at least a few characters.
There is no restriction on the number of characters.
But if no characters are typed in when you display message here saying,
comment as required.
If your form is currently invalid, then your submit button will not work.
But once your form becomes valid, then your submit button will work and
should enable you to submit the font.
So, that is the second task in your assignment.
The tough task in your assignment is that as soon as the form has valid information,
you should display a preview of what you have just submitted in the form.
Let me type in something more meaningful here, so that they're
preview looks interesting.
So you see that as soon as you type in valid information into your form,
you should show a preview of what the comment will
look like if it gets added into that list of comments for the dish.
Now notice that in the preview, you don't have the date displayed yet.
So, that is another thing that you need to keep in mind.
If the form becomes invalid, then the preview disappears.
But as soon as the form becomes valid, the preview will reappear.
So, this is something that you should design appropriately using the ND list and
then making sure that the form is valid before you display this information there.
So, that is the preview.
Now when the user clicks on the Submit button,
then there are a few things that you need to do.
When the user clicks on the Submit button, then this comment will be
added into the list of comments that you have for this particular dish.
So, let me click on the submit button and you will immediately notice that the form
has been added into the list of comments for this particular dish.
So, you see that the last comment that I just entered has been added in here.
Also notice that the date for
the form has been added into the comment here.
So you are supposed to take the values from the form model and
then copy it into a data model, and then you push the comment
into the JavaScript object ray of comments for the dish object.
So, that is something that you need to do using the array push method for
JavaScript object array.
Furthermore, the date should be automatically configured and
added in to that data model.
Remember that the form model doesn't contain the date, but
the data model which is derived from the comment class that we have designed,
the data model contains the author, the rating, the comment and the date.
So, you need to add the date into the data model.
So, this is where you'll make use of the Java Script
date class together with converting it to an ISO
string before you store into the date field of your comment data model.
Now I have provided you links to examples of how you can
create date and how you cab convert the date into an ISO
string in the documentation for this assignment,
and also in the additional resources for this item.
So, please look that up to understand how you're supposed to
add the date to that comment field there.
And once the comment is pushed into the array of comments,
then it'll join the rest of the comments for that particular dish.
You have to remember that we are not saving this to the server side,
because we don't have a server side.
So if you reload your page, that comment will disappear.
That is perfectly acceptable.
At this stage, we are not trying to save the changes to
the dish back to the server through our dish service.
That we will do in one of the later cycles.
So at this moment, if you reload this page, the comment that you just input will
disappear, but that's perfectly acceptable.
So, this is the third task in your assignment.
After you complete all the three tasks, make sure that everything works
correctly before you submit the assignment solution to their system.
[MUSIC]