Reactive Forms

[00:00:00]
>> We just finished talking about how to use reactive forms. Let's actually use them. Let's build something with reactive forms right now. So I'm gonna go into the My Folders here. All right, go to README, and then we should be right as rain look at that. Reactive forms is spelled correctly, hopefully.

[00:00:21]
That way we will not [LAUGH] add into the error count. Bam, first try. You see that? Professional, okay. So here is what we are gonna do with Reactive Forms. First you have to enable Reactive Forms by importing the Reactive Forms module at the file level, and then into the import.

[00:00:42]
So let's do that work now. I'm feeling energized. I'm thinking about how much fun this is gonna be. Let's go and some candy. I'm also thinking about candy. All right I think I did this for you already. You lucky because I care about you that I already do this for you?

[00:01:05]
Wow, I must really care about because I did that. That's nice. Man Mark why you being so nice to people? No so my nature. Okay, so the first step I did for you because I want your life to be easier. And then we'll get to define the model for controls model.

[00:01:21]
Now this is the part that I was telling you about where we had to programmatically define the different things that will be on our screen. So if we look at our blog post again, now it's gonna be a reactive version because we did the template version that will do the reactive version.

[00:01:35]
So we got two properties that we're gonna do. So we got sorry not two properties, we have the main property and then Is gonna have two controls. So let's start by importing form group, and form control in app.component.ts. So let's do that work, Form group, form control, Okay from, all right.

[00:02:13]
All right, so we got those two. Now if we wanted to we could actually combine these two imports, which I will just for posterity, yeah, there you go. BAM so we got foreign group, foreign control, Reactive forms, all available to us. Let me collapse our components so we can just focus on this part.

[00:02:33]
So now we need to define our what's the highest level for Reactive form? Do I remember that part? Let's go back. Okay, let's look at this example. Okay, what's the highest level here?
>> You mean the form group?
>> The form group, that's right. So that's like the outside thing I want you to think about.

[00:02:54]
So this one is gonna be called blog form equals new form group. And then we're gonna give it some form controls. I know I didn't give you the controls yet. Relax, wait, I made that like a function. Hold on, sorry. That should go inside of there. There you go.

[00:03:14]
Okay, says the blog title, which is a new form control which is awesome, and it's probably gonna be a string. I think we can confirm that it's gonna be a string. And then we have the body, which is also a new foreign control. Intellisense, get out of the way!

[00:03:38]
[LAUGH] Alright, so that's our foreign controls. Okay, that form group. Alright, so we got that click and we're feeling good about that. Alright, so title and body, bam, done. Now we need to update it to bind it to the template. So the first thing is we want to bind our form group to our blog form.

[00:04:00]
So let's do that as all in app.component.ts so now we can go back to our component class. And we find our form. There it is. I wanna say this hey, you got a forum group? I sure do. And well I'm gonna say it equals blog form. Nice and crisp.

[00:04:23]
Now we can go even further. So down by the title, remember that form control name? Okay, the first one is gonna be called title. Now that string title, that's going to be used to look up in that form control's object, right? Angle's gonna look it up so it has to match.

[00:04:43]
But no square brackets unless you're trying to do something more advanced like some dynamic form control stuff. And you can get really robust and really creative, right? You can dynamically create your forms, create entries, and do things like that. That is totally possible friends. You can do whatever you can think of really?

[00:05:01]
All right, let's do the same thing for our text area. All right, so I'm just gonna slide it down just a little bit and I'm gonna say formControlName=, and this one is body. Okay, we are cooking all right, sounds good. All right, here's what we'll do. We'll take some of this out.

[00:05:26]
I don't think we need this name right here. We can take that out. It's not breaking anything. Okay, so but let's see. I think we're doing pretty good. Yeah, we did that. Update input title by adding the form control. All right, the input with the title, yes, right, with the ID of title.

[00:05:47]
That's what that hashtag means, sorry. When I wrote that, I was trying to find a succinct way to write that. Sorry if that's confusing. The same input with the ID, hashtag is ID, right, of title, and you set the form control name attribute inside into you do body.

[00:06:03]
Okay, now I think I have an extra square bracket when I did a binding Yep, that happens sometimes sometimes I type too fast and I get an extra square bracket that's me for when I typed it. Cuz I did like this. Yeah, that happened sorry, I'm the World's fastest typer.

[00:06:23]
My bad. All right, no more errors, and now our blog is back. Our blog is back. All right, so we have our parts there. Now we just wanna handle the on submit. So now you wanna call the blog, the post blog function, and pass it in the title and body as parameters.

[00:06:44]
How do we handle the submission though when somebody clicks submit, it might remember that the thing that I was telling you about the event is wrapped in parentheses.
>> Ng model.
>> You said it. I'm just happy. Yeah, that was good.
>> Was I wrong?
>> No.
>> [LAUGH]

[00:07:02]
>> You're so right. That's the problem. You are so right and I just loved it. Sorry, my reactions are exaggerated but I am really impressed. So good stuff. Okay, good. So ng submit Okay, and then we should be okay. So that's our handle form submit. This the wrong function.

[00:07:34]
I'm sorry I typed the wrong thing and efference, forgive me. Should we handle form submit All right, let's make sure that we got no errors there, okay? So here's how we can confirm that it's working for us. So if we go to this thing and that thing and then we submit a post.

[00:07:55]
I think I might have broken it. I think I broke it. I think I got to put my because this is the event handler. Why do I have so many parentheses I don't know. Too many parentheses. Sorry about that. Okay, so let's get back to inside of our handle form submit.

[00:08:12]
Before we go to the next step. I just wanna do this just for for kicks and giggles. Just because I like having fun. Okay, so we can do form submitted. The second greatest debugging technique is a console.log to make sure that everything is working for us. We're having a good time, so we put something in there.

[00:08:29]
Okay, so our form is being submitted, but the page is not being refreshed. And here's what's the best part. You see, so when I hit submit, it doesn't refresh. And we don't lose our data. So that's how we know our binding is working. Okay, so now we can just take this home by calling post blog, which this function could be a call to like a service or something like that.

[00:08:51]
But right now, we're just gonna console.log it anyway. Okay, so now what do we pass in here? How do we get our values out of this thing? What's the first part? Just tell me the first part you can think of. What's the first part to get our values out of the form?

[00:09:11]
You probably have to reference the form right? So let's reference the form. So we'll say this dot blog form, ok. So we're almost there, if we do .value, and can you see in that upper corner, it tells you what the value of the form is. It's either null or a string.

[00:09:34]
So when we do .value, we have some properties there. So let's do that. To do that as you dot value and then we'll do dot. The first thing he wants is title and then we do this .blogform.value.body okay, so we should be good. Why are you complaining? Why aren't you happy?

[00:09:58]
This stop. A post-block excuse me. Okay good good good good we should be good to go this is should be a string, what's your problem? Why are you complaining this seems like a moment of complain that you shouldn't be complaining about, fine we can. We can update this.

[00:10:22]
But that feels like extra work here, let's see, or null, what? I don't like that, hold on, okay. So, we have to update our type to be a union type here, because with a template driven form. Here's the problem. You don't start with a reactive form. Here's the problem.

[00:10:46]
You are not sure what the type could be null or undefined as well. And that's the prompt for a value in the form. So you also have to update this to be like your union site. So we'll set that to be a union type. Now I will keep my screen together for a second just so you can see it.

[00:11:01]
Hold on, let me just organize it that way we can all be in the best place of success you see. So, for post blog, I have to update the types for my title and for my body. Okay, update both types. And now, with both types being updated, we can save this.

[00:11:21]
Okay, I'm gonna save this, and then if we go back to our screen and submit a post, you see, there we go,so. So, here's the blog post, I'm going to tell you another story. It's been two years in Hollywood. My agent thinks I'm going to finally EGOT. I already won an ME.

[00:11:59]
For my, it's not enemy damn. You spell Emmy? Emmy or run an Emmy? For what? What did I win it for this? For my front end? Yeah, for my front end master's course. My rap skills got that young. Okay, what do you get for Grammy? Thank you, that young Grammy.

[00:12:29]
My latest film, Will secure my Oscar. What's my film name? The code teacher. All right, listen, that film, the movie poster is me walking on a desolate road with a keyboard to go teach code to people who need it. All right I want to go okay, well look at you see.

[00:13:01]
So all that works now, it works the same way as other form. And so I showed you both examples to use the template form and the reactive form what is your opinion so give me a thumbs up if you prefer to template driven style. Okay, give me a thumbs up if people you prefer the reactive style?

[00:13:21]
All right some of you all are lying. I'll give you nothing because I don't even care about either one of these, which is also a valid answer.
>> I haven't made up my mind yet based on our small example.
>> Okay, undecided. But the thing I do like about the reactive form style, even for a small form, the thing I do like about it is that I know what the data is going to be, and I know what the controls are gonna be.

[00:13:43]
I just like the very distinct nature of that, whereas with a template-driven form, I have to read the template to even know what everything's gonna be. But this, I'm looking at this blog form group, I'm like, I know what the answers are.