Hello everyone and welcome back.
In this lesson we are going to learn how to handle user input.
We have our application and how to properly use forums in view.
In doing so we we're also going to introduce a new very important directive which is v model.
Let's get started.
Yeah we are in business to your code and as you can probably see the HMO file that is currently opened
in the ED is very similar to the one that we've used in their class and style binding lesson and they've
also really opened the file in Chrome so that this is what it looks like.
Let's now start modifying our code a bit.
So instead of defining the caller to use EHR we can define caller as a property of what data object.
And here we can specify which color we want to use for our cereal.
And of course because of how everything works if we now go back to Chrome and refresh our page our seed
call is still here.
In this lesson however as the title suggests we're going to talk about forms and user input.
Let's see what changes we need to make in order to use the V Model directive to get input from the user.
That will then allow us to change the value of color.
So let's go back to the HDL file and you know one of the things that I really like about the FT model
directive is that it allows us to create a two way binding between the properties of either a data object
and the inputs in our HDMI pages.
And this is really awesome because as we are now going to see the data provided by the input field is
going to be available right away.
So yeah I'm not going to copy this lever like so one and two times.
And so yeah I'm going to delete these innovative and I'm going to define a paragraph instead we call
our data.
Antonio I'm going to interpolate the caller property like so while on the other deed and going to find
an input field of type text them with v o the binding that caller property of the data object.
Let's now open up our browser once again let's refresh the page.
And as you can see we now have a text to input and a paragraph both showing the current value of the
color property in the data model and because as I said this is a two way binding.
As soon as we change the value here the value assigned to color changes accordingly.
You see and therefore the whole application updates to reflect the new changes.
And considering that decoder probability is also bound to see to the background color probability of
the style attribute in our deal with class circle we can also use some extra decimal combinations such
as for example 22 Doubleday ninety nine and you see that every few works like a charm in a very elegant
way.
So not to do is starting to understand our defeat model directive works.
Let's make another example.
So first of all I'm going to change the properties in the data model.
So this is going to be taxed then maybe we can just use an empty string like that.
And here are a boolean checked true.
And so going back to the HMO file we are in the HMO file.
I can delete that circle class because we don't need it anymore.
And they can delete this deal altogether.
Let's clear this other one.
And here go to the final paragraph.
So write a message.
So let's not use a text area.
We do need name or I.D..
And considering that we are using Bootstrap let's use the class for control maybe event place holder
write something columns something like 60 rows five should be enough.
So I'm going to give a bit of indentation.
So 1 to
4.
And of course in this specific case the most important thing that we need to define at the moment is
the model passing it.
Text and effect that you can define a D plus call five bootstrap class so to sway.
And another one right here below.
Let's call five and here and there paragraph so message.
Just like that.
And the paragraph with text.
So going back to Chrome now let's refresh.
Now we are we can't write whatever we want.
Hello everyone.
This is super cool.
You seated as soon as I'm typing something more often you have text of course is changing accordingly.
Let's also use the dev tools so view and well we can actually place these right here at the bottom.
I can close the console at the moment so roots you see we got a detail object so the data more than
itself with text the editor is of course it is changing as you can see less CO2 and all boolean values
like for example we got to checked properties.
So yeah we can use a checkbox going back here and say this second div we can define input type checkbox
and yeah we can add an I.D. check box with V Model bound on checked of course.
And here we can add a label box or label for our checkbooks.
Yeah we can add to whitespace is dependent simply are checked property.
Hey maybe we can also add value.
So let's go back to the browser refresh and we actually have this small area because of the com out
right here.
Let's refresh it once again.
And of course at the moment the value is true because that's what we set in deep data model.
But of course we can just change it by selecting or selecting the checkbox let's CO2 and or multiple
options using a select drop down menu.
So either first of all I'm going to define another property City another string like so and so here
I can in fact just copy this and teeth like so and you're inside I can now use a select input and we
need neither name or I.D..
We need instead we model on city like so and yet decide okay now what all the different options.
So option no value is needed instead you can define the different cities.
So Rome and yet I can add New York Danny are Shenzhen and maybe London and even Mumbai.
And yet below we can add a span.
Like so I can add some spaces and this is going to be city.
And of course your city.
Let's go back to Chrome.
Let's refresh our page.
We got our drop down menu so Rome New York London Shenzhen Mumbai.
These are all of course pretty simple examples.
However they are important to understand all the V Model directive works especially because nowadays
basically every application that you're going to write is going to require some kind of user input less
than SEO to use every few we've learned so far to create a simple comments application.
We're going to have a forum to collect the user input and right below a list of comments.
So first of all let's change the data object.
I'm going to delete all these properties and instead I'm going to define comment as No.
And comments as an array of comments.
Let's change the ECMO file accordingly.
So I'm going to delete all of these and inside these other Div I am instead going to define form.
We do not need action because we are going to manage everything from within our application.
And yet I can define a div class considering that we're using Bootstrap for control and yet we can define
a text area maybe rows 8 and columns.
We can add 80 ideas maybe just comment text where we can define plus form control.
And this is in fact going to be for group and most importantly we need to define v model of course.
So we model on comment.
So can indent all the other attributes as well.
And is like so.
And well maybe in fact these can be five and conceding that we have any d we can also define a label
for common text so published in a comment we now need of course to define a bottom so button.
And again we got bootstrapped so class.
Button button Sam button primary of course this is button type.
Submit it.
And in here of course publish so so one and two and if we now go back to on a refreshing dip age it
is that form you know might be asking yourself well how can we use this form to actually add comments
to a list of comments right here below.
Typically when pressing the submit button all the detail of the form would be sent to the backend and
specifically to the URL defined in the action attribute.
However single page applications work differently than dead ones the page is loaded.
The first time meaning once the whole application is been loaded you never want your page to refresh
again in order to keep the user experience at its best in a single page application.
JavaScript is going to be in charge of handling all day use any input sending it to the rest api backend
when needed.
And so using user yes we can now wait for the submit event of the form itself.
And once the event occurred we can then call an appropriate method to manage all the data.
So let's go to the main road.
Yes file.
Yeah I'm going to define methods and yeah on submit it.
And yeah we can add let new comment equals these dot comment then these dot comments dot pusher and
we want to add of course your comment and so we can now reset D that comment to no.
And then of course going back to the H GMO file yeah we can add on sub meta and you also need to specify
dot preventer which allows us to prevent the default behavior of the four but that is trying to send
data to an action endpoint and that is what causes the page to refresh and yeah of course we want to
call our own submit method that will then of course manage all the data.
And yeah I see that I need to change the name like so let's also define the code to show all the comments
in the array.
So yeah I'm going to define in order to have a right here below div we have class we cannot contain
it and yet we're going to need another div this time we can add class card one of bootstrap classes
we V for comment in comments and yet and other DB div class card money and get decide we can add the
comment like so and if we now go back to Chrome and refresh the page we can add to comments like hello
world and it is at a lower comment.
Of course we see that we can fix this style a little bit.
So let's go back to the file and you can remove the container.
I can see that just use a row like so.
And yet I can define div we have class called something like call 10 move this one right here below
and I can do this same for the other DB.
So what 2 can move this one right here.
So let's go back to Chrome once again let's larger screen refresh comment and well actually we can make
that even better because if you had a comment now you see that they are now touching so I can add a
bit of margin in your car as well.
So yeah margin top 1 fresh no 1 yet another awesome.
We still have work to do however because as you can see I can also add empty comments if that's not
okay.
We need to add some kind of validation 20 inputs.
Also on the front end side of our application and it is actually pretty easy to do so let's go back
to the main the 3D file and first of all I'm now going to add in other property here and did detail
object errors which I initialize as No.
And then in there on submit method first of all let's check if the user has added any input so if these
dot comment in that case we want of course to audit to at least look like so.
But otherwise we can add a message to errors so these errors equals something like the comment field
can't be empty let's update the h the email code accordingly.
So right here on top I'm going to add a paragraph and in that paragraph I'm going to set the if errors
we've plus we can add a bit of margin and even style text align center and yet we can add these errors.
So errors like so and so considering that we are now showing the errors.
If a user tries to submit an empty comment we also then need to hide the error messages after the user
is sent a proper comment instead and we can do that by setting user errors back to normal.
So if these dot errors in that case we set these dot errors to know like so.
So let's now go back once again to the browser like so to refresh the page.
So first comment publish and everything is fine let's not try to publish an empty comment.
We get an error message.
The comment field can't be empty.
So let's add a second comment publish and as you see every few words fine and the error of message disappears.
Okay.
So that was it for this election about forums and user input in future.
Yes.
In the next lecture we're going to learn how to use future yes components which allow us to group our
code in a powerful and reusable way getting closer and closer to the final project of the course.
See you in the next lesson.