This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Form Template Solution" Lesson
[00:00:00]
>> Let's finish this template form solution and add in the two controls for the, to complete binding to a course object. And so we have percent complete and we have favorite. So for something that's a variable range of numbers, I think the appropriate control for that is the, Slider.
[00:00:38] So I'll just pull this up real quick. And so anytime it's like, I'm this much or I'm this much complete or whatever it is, that is I think the best control for that. For something that's Boolean, on or off, you could have actually chose a couple of them.
[00:00:59] So you could have done a checkbox which is good, as well as the slide toggle. Now one thing I will point out here since we're here is that these components work really well not only on desktop but on mobile devices for kind of like touch input as well.
[00:01:18] So this is one of the reasons why I really like not only material design, but the angular implementation of it. So with that said, let's hop into our template and let's build this out. What I'm gonna do is I'm going to just create a section. So the map form field is designed for really text fields, and so for some of the material components you won't wrap them in the mat form field.
[00:01:52] And so on this case we're just going to wrap this in a session tag, do mat slider. It will be super amazing if my auto complete would work, but no luck. And let's start to add in the attributes to make this work. So, Class full-width, this is something that I added.
[00:02:19] What this does is it just forces your components or your inputs to essentially fill the width of the card. And then from here we have min equals zero. And because this is 0 to 100, we'll go max equals 100 and, The name equals percent complete and, Entry model.
[00:02:54] We're also going to bind that to, Selected, Course, Make sure I spelled that right, percent complete. And then one other thing I'm going to do just because it's a material thing or a control thing, is we're going to add in thumb label. So let's go in here. There we go.
[00:03:32] So now if I select this, notice that it just slid right over. And when you install Angular Material using energy add, you're going to be prompted, do you want to add in animations. And the reason being is so you get these nice movements when you start to interact with these components, so just that ease of use is just some really nice right out of the box.
[00:04:00] All right, so hopping back into our code. What I am going to do is well, we'll just add an h4 tag, and, We'll go selected course, Percent complete. And so we're just going to display this, give a little bit more of a cue for the user. Make sure I got that right.
[00:04:37] There we go. So now as you can see, as I drag this, that somebody doesn't actually have to click on this to see what this is, but over queueing that in. Al lright, to finish this up, let's do the check box. And we will call it a wrap on this module.
[00:04:59] So section from here. We're just gonna do Matt checkbox,.and within this we're going to NG model. There we go. And we're gonna bind to select a course favorite. Now one thing you'll notice here is that when you use NG model, you have to put name or use the name attribute on the element so that NG model can hook into the form itself.
[00:05:51] And so it's just one of these things that happens under the hood, it's just kind of the way it is. But if you use NG model and it just doesn't seem to be working, ideally you would get a cue where it would kind of prompt you like, hey, this isn't kosher.
[00:06:09] Yeah, so you'll see here. If NG model is used within a form tag, the name attribute must be set. And so just by default out of muscle memory at this point, anytime I'm using NG model I add a name attribute to it. So if we go here, now let's go back.
[00:06:35] And I select this, select this, cancel. Good, There we go. So let's make one small change, and then I will check this code in, Up here. Let's go with, I'm gonna just put this in a span tag. We're gonna go ngf. If there is a selected course, then we're actually going to, Show the selected course, Title.
[00:07:30] And then what we'll do we'll go else, we'll go no course, or no selection. So I'm doing this off the top of my head. There we go. And this is why I start making deals with God. If this works, I will never eat another carb ever again. Yeah, [LAUGH] don't make promises I cannot keep, and that is sage advice.
[00:08:14] All right, I'm rolling the dice. So kinda close. Let's go and take one look at this. I don't wanna get in the weeds here. Else no selection. Did I spell this wrong? I don't think I did. Let me just look in the template real quick, ngf else block, ng template.
[00:08:46] I think I did it right. You know what? My helpful live audience totally, totally got it there. So I always have a selected course because, guess what, we're setting it to empty down here, we're always resetting it, but what we don't have is an ID. So super big hug.
[00:09:18] All right, so here we are, I feel good about this, I can fiddle with some styling a bit but I think we're in a pretty good spot. Cancel, we can submit, and we now have a form. So somebody looking at this, this is kind of a semi functional, at least from the outside looking in, a semi functional app.
[00:09:46] And so generally when I'm working with brand new Angular developers, this is something that I have them do what I call a 30 by 30 where they do 30 apps in 30 days, and they do this over and over. And so this is kind of what they get into kind of for the first ten applications.
[00:10:05] And so if you're following along, congratulations, you're well, well on your way. So this Apple keyboard is a mess. All right, Hit checkout, dash B, and we're gonna go template forms solution. There we go. [LAUGH] Wait for it. All right,