WEBVTT 00:00.120 --> 00:02.310 Hello everyone and welcome back. 00:02.340 --> 00:05.090 In this lesson we are going to learn how to handle user input. 00:05.090 --> 00:09.050 We have our application and how to properly use forums in view. 00:09.060 --> 00:15.040 In doing so we we're also going to introduce a new very important directive which is v model. 00:15.060 --> 00:16.020 Let's get started. 00:16.970 --> 00:22.350 Yeah we are in business to your code and as you can probably see the HMO file that is currently opened 00:22.410 --> 00:30.030 in the ED is very similar to the one that we've used in their class and style binding lesson and they've 00:30.090 --> 00:34.610 also really opened the file in Chrome so that this is what it looks like. 00:35.130 --> 00:37.150 Let's now start modifying our code a bit. 00:37.170 --> 00:48.480 So instead of defining the caller to use EHR we can define caller as a property of what data object. 00:48.480 --> 00:53.430 And here we can specify which color we want to use for our cereal. 00:53.540 --> 01:01.470 And of course because of how everything works if we now go back to Chrome and refresh our page our seed 01:01.490 --> 01:02.860 call is still here. 01:02.960 --> 01:08.660 In this lesson however as the title suggests we're going to talk about forms and user input. 01:08.700 --> 01:15.820 Let's see what changes we need to make in order to use the V Model directive to get input from the user. 01:15.950 --> 01:18.590 That will then allow us to change the value of color. 01:18.740 --> 01:25.520 So let's go back to the HDL file and you know one of the things that I really like about the FT model 01:25.580 --> 01:32.660 directive is that it allows us to create a two way binding between the properties of either a data object 01:32.990 --> 01:36.100 and the inputs in our HDMI pages. 01:36.170 --> 01:41.590 And this is really awesome because as we are now going to see the data provided by the input field is 01:41.600 --> 01:43.490 going to be available right away. 01:43.610 --> 01:50.670 So yeah I'm not going to copy this lever like so one and two times. 01:50.720 --> 01:57.470 And so yeah I'm going to delete these innovative and I'm going to define a paragraph instead we call 01:57.470 --> 01:59.600 our data. 01:59.620 --> 02:08.420 Antonio I'm going to interpolate the caller property like so while on the other deed and going to find 02:08.480 --> 02:20.120 an input field of type text them with v o the binding that caller property of the data object. 02:20.220 --> 02:24.310 Let's now open up our browser once again let's refresh the page. 02:24.550 --> 02:30.990 And as you can see we now have a text to input and a paragraph both showing the current value of the 02:30.990 --> 02:36.240 color property in the data model and because as I said this is a two way binding. 02:36.240 --> 02:43.620 As soon as we change the value here the value assigned to color changes accordingly. 02:43.620 --> 02:48.180 You see and therefore the whole application updates to reflect the new changes. 02:48.180 --> 02:53.730 And considering that decoder probability is also bound to see to the background color probability of 02:53.730 --> 02:59.580 the style attribute in our deal with class circle we can also use some extra decimal combinations such 02:59.580 --> 03:06.210 as for example 22 Doubleday ninety nine and you see that every few works like a charm in a very elegant 03:06.210 --> 03:06.830 way. 03:06.930 --> 03:10.620 So not to do is starting to understand our defeat model directive works. 03:10.650 --> 03:12.590 Let's make another example. 03:12.600 --> 03:16.200 So first of all I'm going to change the properties in the data model. 03:16.260 --> 03:22.790 So this is going to be taxed then maybe we can just use an empty string like that. 03:23.140 --> 03:26.480 And here are a boolean checked true. 03:27.110 --> 03:32.130 And so going back to the HMO file we are in the HMO file. 03:32.160 --> 03:36.500 I can delete that circle class because we don't need it anymore. 03:36.690 --> 03:39.420 And they can delete this deal altogether. 03:39.420 --> 03:41.480 Let's clear this other one. 03:41.520 --> 03:45.030 And here go to the final paragraph. 03:45.030 --> 03:48.230 So write a message. 03:48.480 --> 03:51.520 So let's not use a text area. 03:51.600 --> 03:54.440 We do need name or I.D.. 03:54.900 --> 04:03.960 And considering that we are using Bootstrap let's use the class for control maybe event place holder 04:05.160 --> 04:12.480 write something columns something like 60 rows five should be enough. 04:12.480 --> 04:15.260 So I'm going to give a bit of indentation. 04:15.940 --> 04:17.610 So 1 to 04:21.020 --> 04:22.040 4. 04:22.310 --> 04:27.560 And of course in this specific case the most important thing that we need to define at the moment is 04:28.340 --> 04:30.020 the model passing it. 04:30.020 --> 04:43.150 Text and effect that you can define a D plus call five bootstrap class so to sway. 04:43.260 --> 04:45.160 And another one right here below. 04:46.380 --> 04:51.700 Let's call five and here and there paragraph so message. 04:52.440 --> 04:53.440 Just like that. 04:53.670 --> 04:59.360 And the paragraph with text. 04:59.610 --> 05:03.870 So going back to Chrome now let's refresh. 05:03.910 --> 05:06.150 Now we are we can't write whatever we want. 05:06.210 --> 05:08.670 Hello everyone. 05:08.670 --> 05:11.220 This is super cool. 05:11.250 --> 05:17.370 You seated as soon as I'm typing something more often you have text of course is changing accordingly. 05:17.370 --> 05:24.990 Let's also use the dev tools so view and well we can actually place these right here at the bottom. 05:25.440 --> 05:32.490 I can close the console at the moment so roots you see we got a detail object so the data more than 05:32.490 --> 05:42.800 itself with text the editor is of course it is changing as you can see less CO2 and all boolean values 05:42.860 --> 05:45.170 like for example we got to checked properties. 05:45.170 --> 05:54.470 So yeah we can use a checkbox going back here and say this second div we can define input type checkbox 05:54.950 --> 06:05.440 and yeah we can add an I.D. check box with V Model bound on checked of course. 06:06.170 --> 06:12.160 And here we can add a label box or label for our checkbooks. 06:12.560 --> 06:19.790 Yeah we can add to whitespace is dependent simply are checked property. 06:19.940 --> 06:23.370 Hey maybe we can also add value. 06:23.630 --> 06:30.540 So let's go back to the browser refresh and we actually have this small area because of the com out 06:30.550 --> 06:31.010 right here. 06:31.040 --> 06:32.540 Let's refresh it once again. 06:32.540 --> 06:37.640 And of course at the moment the value is true because that's what we set in deep data model. 06:37.660 --> 06:44.630 But of course we can just change it by selecting or selecting the checkbox let's CO2 and or multiple 06:44.630 --> 06:47.960 options using a select drop down menu. 06:48.260 --> 06:55.630 So either first of all I'm going to define another property City another string like so and so here 06:56.080 --> 07:07.020 I can in fact just copy this and teeth like so and you're inside I can now use a select input and we 07:07.020 --> 07:08.720 need neither name or I.D.. 07:09.090 --> 07:17.330 We need instead we model on city like so and yet decide okay now what all the different options. 07:17.340 --> 07:24.630 So option no value is needed instead you can define the different cities. 07:24.630 --> 07:41.840 So Rome and yet I can add New York Danny are Shenzhen and maybe London and even Mumbai. 07:41.840 --> 07:44.540 And yet below we can add a span. 07:44.650 --> 07:50.420 Like so I can add some spaces and this is going to be city. 07:50.540 --> 07:53.520 And of course your city. 07:53.630 --> 07:54.730 Let's go back to Chrome. 07:55.070 --> 07:56.480 Let's refresh our page. 07:56.510 --> 08:03.650 We got our drop down menu so Rome New York London Shenzhen Mumbai. 08:03.800 --> 08:06.320 These are all of course pretty simple examples. 08:06.320 --> 08:11.930 However they are important to understand all the V Model directive works especially because nowadays 08:11.960 --> 08:17.260 basically every application that you're going to write is going to require some kind of user input less 08:17.320 --> 08:22.200 than SEO to use every few we've learned so far to create a simple comments application. 08:22.220 --> 08:27.080 We're going to have a forum to collect the user input and right below a list of comments. 08:27.080 --> 08:29.770 So first of all let's change the data object. 08:29.780 --> 08:36.210 I'm going to delete all these properties and instead I'm going to define comment as No. 08:36.260 --> 08:39.900 And comments as an array of comments. 08:39.950 --> 08:42.470 Let's change the ECMO file accordingly. 08:42.480 --> 08:50.370 So I'm going to delete all of these and inside these other Div I am instead going to define form. 08:50.870 --> 08:55.910 We do not need action because we are going to manage everything from within our application. 08:55.910 --> 09:03.890 And yet I can define a div class considering that we're using Bootstrap for control and yet we can define 09:03.890 --> 09:08.180 a text area maybe rows 8 and columns. 09:08.180 --> 09:19.240 We can add 80 ideas maybe just comment text where we can define plus form control. 09:19.400 --> 09:26.600 And this is in fact going to be for group and most importantly we need to define v model of course. 09:26.600 --> 09:31.620 So we model on comment. 09:31.930 --> 09:35.370 So can indent all the other attributes as well. 09:36.340 --> 09:38.690 And is like so. 09:39.240 --> 09:45.110 And well maybe in fact these can be five and conceding that we have any d we can also define a label 09:45.110 --> 09:55.480 for common text so published in a comment we now need of course to define a bottom so button. 09:55.640 --> 09:57.770 And again we got bootstrapped so class. 09:57.810 --> 10:04.910 Button button Sam button primary of course this is button type. 10:04.900 --> 10:05.690 Submit it. 10:07.070 --> 10:17.180 And in here of course publish so so one and two and if we now go back to on a refreshing dip age it 10:17.180 --> 10:23.660 is that form you know might be asking yourself well how can we use this form to actually add comments 10:23.750 --> 10:26.090 to a list of comments right here below. 10:26.090 --> 10:31.790 Typically when pressing the submit button all the detail of the form would be sent to the backend and 10:31.850 --> 10:35.710 specifically to the URL defined in the action attribute. 10:36.170 --> 10:41.620 However single page applications work differently than dead ones the page is loaded. 10:41.630 --> 10:47.360 The first time meaning once the whole application is been loaded you never want your page to refresh 10:47.360 --> 10:51.990 again in order to keep the user experience at its best in a single page application. 10:52.010 --> 10:57.890 JavaScript is going to be in charge of handling all day use any input sending it to the rest api backend 10:57.980 --> 10:58.820 when needed. 10:58.970 --> 11:04.730 And so using user yes we can now wait for the submit event of the form itself. 11:04.730 --> 11:09.410 And once the event occurred we can then call an appropriate method to manage all the data. 11:09.440 --> 11:10.670 So let's go to the main road. 11:10.710 --> 11:11.490 Yes file. 11:11.700 --> 11:18.400 Yeah I'm going to define methods and yeah on submit it. 11:19.730 --> 11:31.700 And yeah we can add let new comment equals these dot comment then these dot comments dot pusher and 11:31.850 --> 11:40.860 we want to add of course your comment and so we can now reset D that comment to no. 11:41.210 --> 11:49.490 And then of course going back to the H GMO file yeah we can add on sub meta and you also need to specify 11:49.520 --> 11:56.360 dot preventer which allows us to prevent the default behavior of the four but that is trying to send 11:56.520 --> 12:02.270 data to an action endpoint and that is what causes the page to refresh and yeah of course we want to 12:02.270 --> 12:08.390 call our own submit method that will then of course manage all the data. 12:08.390 --> 12:14.120 And yeah I see that I need to change the name like so let's also define the code to show all the comments 12:14.240 --> 12:15.060 in the array. 12:15.110 --> 12:23.360 So yeah I'm going to define in order to have a right here below div we have class we cannot contain 12:23.520 --> 12:30.770 it and yet we're going to need another div this time we can add class card one of bootstrap classes 12:31.250 --> 12:45.210 we V for comment in comments and yet and other DB div class card money and get decide we can add the 12:45.360 --> 12:53.550 comment like so and if we now go back to Chrome and refresh the page we can add to comments like hello 12:54.090 --> 12:57.060 world and it is at a lower comment. 12:57.060 --> 12:59.770 Of course we see that we can fix this style a little bit. 12:59.790 --> 13:03.680 So let's go back to the file and you can remove the container. 13:03.780 --> 13:09.480 I can see that just use a row like so. 13:09.740 --> 13:20.040 And yet I can define div we have class called something like call 10 move this one right here below 13:21.420 --> 13:25.930 and I can do this same for the other DB. 13:25.960 --> 13:33.260 So what 2 can move this one right here. 13:33.260 --> 13:43.350 So let's go back to Chrome once again let's larger screen refresh comment and well actually we can make 13:43.350 --> 13:49.160 that even better because if you had a comment now you see that they are now touching so I can add a 13:49.160 --> 13:51.680 bit of margin in your car as well. 13:52.370 --> 14:04.640 So yeah margin top 1 fresh no 1 yet another awesome. 14:04.970 --> 14:10.070 We still have work to do however because as you can see I can also add empty comments if that's not 14:10.070 --> 14:10.680 okay. 14:10.700 --> 14:12.760 We need to add some kind of validation 20 inputs. 14:12.770 --> 14:17.780 Also on the front end side of our application and it is actually pretty easy to do so let's go back 14:17.780 --> 14:23.240 to the main the 3D file and first of all I'm now going to add in other property here and did detail 14:23.240 --> 14:27.630 object errors which I initialize as No. 14:27.710 --> 14:34.910 And then in there on submit method first of all let's check if the user has added any input so if these 14:34.910 --> 14:42.480 dot comment in that case we want of course to audit to at least look like so. 14:42.590 --> 14:55.580 But otherwise we can add a message to errors so these errors equals something like the comment field 14:55.820 --> 15:03.660 can't be empty let's update the h the email code accordingly. 15:03.680 --> 15:14.790 So right here on top I'm going to add a paragraph and in that paragraph I'm going to set the if errors 15:15.840 --> 15:26.240 we've plus we can add a bit of margin and even style text align center and yet we can add these errors. 15:26.260 --> 15:33.990 So errors like so and so considering that we are now showing the errors. 15:34.050 --> 15:40.620 If a user tries to submit an empty comment we also then need to hide the error messages after the user 15:40.680 --> 15:47.470 is sent a proper comment instead and we can do that by setting user errors back to normal. 15:47.490 --> 15:56.810 So if these dot errors in that case we set these dot errors to know like so. 15:56.850 --> 16:02.660 So let's now go back once again to the browser like so to refresh the page. 16:03.300 --> 16:11.190 So first comment publish and everything is fine let's not try to publish an empty comment. 16:11.280 --> 16:12.430 We get an error message. 16:12.450 --> 16:14.440 The comment field can't be empty. 16:14.760 --> 16:23.100 So let's add a second comment publish and as you see every few words fine and the error of message disappears. 16:23.610 --> 16:23.880 Okay. 16:23.910 --> 16:27.630 So that was it for this election about forums and user input in future. 16:27.630 --> 16:28.250 Yes. 16:28.290 --> 16:32.940 In the next lecture we're going to learn how to use future yes components which allow us to group our 16:32.940 --> 16:39.390 code in a powerful and reusable way getting closer and closer to the final project of the course. 16:39.390 --> 16:40.830 See you in the next lesson.