Template Driven Forms

[00:00:00]
>> All right, let's go to 09-tmplate-driven-forms. Template-driven-forms 09. Let's rock this thing. Y'all are doing so good, I'm telling you, y'all are doing so well. I'm so impressed. I'm gonna go back to Google and be like, yo, look, I don't know, man, we got this new group of angular developers about to change the world.

[00:00:18]
Y'all gotta get up there [LAUGH]. We almost have friends, almost their friends who are hanging in there. That's gonna read me up, and let's get through these instructions. All right, here's what we're gonna do, I'll let you catch up with this real quick. Let's run this activity. So let's make these inputs, and then let's make this our text area.

[00:00:42]
Okay, let's see what we got on the screen, though. Yes, this is gonna be really fun. I like this one, this is a good one. Okay, I wanna start walking us through that. I'm gonna go into my app.component file. Okay, we're gonna add our input. So I can do input, and this type equals text, equals type, equals text, and then we also had Id.

[00:01:24]
Was it my thing? One second, and Id was title. Let's see if that'll let me do it. Is that how you do that? No, no, no, no, that's how you do this, okay. Okay, there you go. It's close, but not exactly what I wanted. Trying to use Emmet, but don't use Emmet right now.

[00:01:45]
Because I'm trying to be fair so you're gonna do it wrong and then you spent too much time trying to fix it. All right and then we're gonna have our text area where id equals body. Okay, so we got a text area. We'll take all the extra properties out.

[00:02:07]
And ID equals body, do I got my ID equals title? And so here's something I learned about labels that you can do if you want to skip the for and the ID part, you just wrap your element in the label. But if you don't wanna wrap it. It then you got to do it this way, yeah?

[00:02:24]
So what I mean is this. If you do this, right? If you do that then you don't need the for because it's automatically associated if you make it a child. Okay, so let's save that get this nice looking blog post. Look at that, that looks nice. Man, I wonder who designed that?

[00:02:48]
He did a good job, man. Website looking like a blog. All right, very fun, and then we just got to add two properties. So then, we got to add two properties. Two string properties, title and body. Okay, sounds good. So we do title and this is a string so we can just do equals empty string and then we have body equals empty string.

[00:03:13]
We got that done, it's too tight. Let's get rid of that one. Okay, cool, and then next after that, we saw we made our model data. Okay, last part is just to add the NG model and the title to the form, NG model and the title of the form.

[00:03:30]
So let's do that. So if we go up here. All right, so that title, why don't you like me? I know why we'll fix them second. We got a title here. And then we'll do body down here, both use NG model. But remember these properties are actually coming from our component class, okay?

[00:04:02]
And the final step. To make sure everything works, we've got to do our imports. FormsModule, okay, so you've got to have the import into formsModule. All right, her Oscar Oscar. Liberty, I can see what I got there. All right friends we're cooking are as good as last part as string interpolations for both to confirm that the values are bad bow, so what I meant by that is I left that in there for you to to handle, but we'll do it too.

[00:04:45]
Sorry, sorry, sorry, sorry. Let me just do this with you. I do this with you. All right, so we'll do the title and this is really just going to be title. Bam and then we'll do this last one here right? Okay, okay, okay, but it's not value is buddy, okay.

[00:05:08]
Now let's go to our screen where our beautiful blog post. Okay, Wow on screen is true autobiographical story. Then a Hollywood agent saw the stream and said, boy, Let's see, he, that's what he said. He's like, boy, come host a game show. Boy, come host a game show.

[00:05:56]
And I said, well, Steve Harvey is my uncle. And he said, Okay, this is an autobiographical story, I don't know if y'all knew this is what happened. [LAUGH] All right, so I became famous, but if you notice as I was typing everything, it was changing in real time because the form was keeping the data in tune.

[00:06:29]
You see what I'm saying? It was like keeping it together, but that goes both ways. If we were to update these properties a different way, like from the code. It would also update the model. So that's what the square parentheses at two way binding, square parentheses, okay? Yeah, this is nice, right?

[00:06:49]
And again, when you have a smaller form, friends, you have a smaller form, this is perfect. Not too much headache. I wanna access the properties, I got them right there. Do you know what else is really nice form validation is also whatever the HTML validators are. So you know how you can type required into a form field and it will make it required.

[00:07:10]
That works with temperature forms. Stuff like that. So you get a lot of value. All right, what questions can I answer before we go on about my story about being famous.
>> Can you go back to your-
>> To my roots as an actor? I can go back to my roots.

[00:07:29]
>> Okay, and then do that [CROSSTALK].
>> Okay, the app components.
>> Sure thing.
>> So okay. Yeah, and make sure that you've got forms module imported. That'll make it not work.
>> Yep.
>> Okay, great, great, great, great, great. Yeah, so remember, you've got to have, sorry?

[00:07:52]
>> Go ahead.
>> I was going to say, you've got forms module to enable the form behavior for a template different forms. We do a lot of NG model. And then remember, these properties have to be properties that are defined in your application class if you're gonna actually reference them.

[00:08:05]
Okay, now let's talk about reactive forms. Here's the next part of the story. So, first, before we do anything with a reactive form, we define our model, right? And this is actually programmatic now. So, now we're at the programmatically, we'll get the login form. Just name for a model.

[00:08:23]
And then we have a form group. A FormGroup represents a group of FormControls, okay? So let's say that you could have a page on your application that has multiple forms like types of forms on it. People have to stuff like that, right. And you don't want them all to be a part of the same form made.

[00:08:41]
So think about a multi step, like sign up, let's say in healthcare, you see this a lot. Well, you have to check in and each form is different part of the page, right. So form group allows you to like group them together programmatically for yourself, and that you can validate against that one form instead of validating all of your forms at the same time.

[00:08:58]
This is where you get a lot of value. Okay so you got your name, property, that will be the name, that name is important. So you definitely wanna keep like an idea of what's on the left hand side. That's the form control. Wait what type is that form control?

[00:09:12]
What type of value does it accept? A string, remember I said they were typed? This is where reactive forms really shine. So I can tell you if you put anything in this form that doesn't match the type, we can give you some errors early on. Okay, so we got the form control.

[00:09:29]
Now check this out. Here's our form now, here's our form. First I combined the form to a form group and tell it what is the data model that represents this form. It's login form. That's my data model, very nice. Then I got this form control name. Here's a big, big, big gotcha, okay?

[00:09:53]
What does it look like it's missing? Can anybody guess what it looks like it's missing?
>> The brackets only,
>> No brackets can be pumped up that there are no brackets there it looks like the brackets are missing. But in this case we're actually not trying to bind to a property directly.

[00:10:16]
That this is the name of the property so we don't have to bind to the value. The only time you would do the brackets is if you want to dynamically set that name. You see if it was dynamic, but because we know the name from our list, right?

[00:10:31]
So that's why I said look at the left hand side, right? So you got your name. So in our case, so this is like username, okay, right. And same thing with password, right? The form control name. So it's going to link those back. Let's say we have that model, okay.

[00:10:45]
Then you get one more you do. So we, so then when a form is submitted, because here's what happens when you make a button that says submit on a form, what do you think happens? It submits, what does the normal submit action is to refresh the page, right?

[00:11:00]
So go through and refresh the page. In angular land, you probably don't want to do that because it's a single page application. What you're probably hoping to do is to gather the information from the form, process that information, then make maybe an API call. This gives you the ability to do that.

[00:11:18]
So instead of having to do prevent default, try to catch it before it you know that stuff. So as you submit when you're going to submit, do this thing, okay? So nice little thanks and event, and you're gonna handle that event. All right, here's an example of what that could look like.

[00:11:33]
If we go to like in our component class at some point, we get our login form. You gotta like handle submit. And I can do something else, but how do I get the values? Well, I do this.loginForm.value, and then that value is available to me.