Forms Overview

[00:00:00]
>> All right, so how do you gather input from your users? Because we got routing out the way now, right? We got all the pieces, we're so close to building a full application that we can just ship and get some VC funding. We're super close. All right, now this is an area where angular is very interesting, very interesting.

[00:00:23]
We have a tale of two systems for our forms. Okay, a tale of two systems. We provide you two ways to define forms and gather input from users in angular. One way is called template-driven forms. Template-driven forms where the source of truth is the actual template. So you start putting information in the actual template of your component that then in your component class, you can start to access later but everything is in the template though, and you'll see what I mean.

[00:00:55]
Here's why it's great though, right? It's quick and easy to use. And well, I won't say quick and easy, but it's like very straightforward cuz you don't have to set up anything. You just start typing stuff and it works. Really great for small forms. So if you, let's say you're gonna do an input, like for a login, you got username and password.

[00:01:15]
Two things, use a template-driven form. No need to go to the more of robust version. Downside when you go to do unit testing, it requires so much more configuration, okay? So much more configuration. And so that's kind of a trade-off, okay, it's a trade-off. Then you have what we call reactive forms, reactive forms.

[00:01:40]
Now, these are fantastic because it becomes about the data model that you define programmatically, the data model. And then you take that data model, and you bind it to your form. Ever does something like some .net, and why it doesn't .net stuff. And you know how you define your form model in .net and then you can then link it to your ASP file.

[00:02:00]
That's what reactive forms are closer to that idea, okay? Where you define the model, you define your validations, everything is programmatic, and then you go back to the representation in the template. Really great cuz you can do typing, which is great. If you know that form values should have a certain type, you can take advantage of that.

[00:02:18]
They're reusable because the model's an object, then you can share that object, meaning you can define it in some other file and then just import it. And be like, I'm gonna import this model and build a different type of form around it, but reuse all of the functionality cuz it's already done for me, right?

[00:02:37]
Somebody already made it. And unit testing it just has a better experience right now, okay? So let's start with template-driven forms. Here's a form. Okay, here's a form. When you're making your forms, I see a lot of people do this. Here's a way to make your forms a step above out of the gate.

[00:02:57]
Add labels to all your inputs and controls. You know what those labels are for? Anybody know by any chance?
>> Accessibility.
>> Accessibility, not everybody uses the Internet the same way, right? And so why would you cut out millions and millions of users because you don't wanna put the labels, which labels in there, okay?

[00:03:13]
Make your stuff for everybody. Good, good, good, good, good. I'm off my solo box. Okay, so we've got a label for username and then we got a label for password, and then we got a type, okay. Here's how you can do it with a template-driven form, all right?

[00:03:29]
Use this attribute called ng model, okay? And the model is kinda like based in the form, it's like based on this element now, where we got both syntaxes. Anybody see that right there? You got your binding and your event, and that might seem a little tricky like what's going on, bro?

[00:03:47]
We didn't make up this name. Y'all made up this name. It's called banana in a box.
>> [LAUGH]
>> Yeah, I mean, listen, there's the streets we're talking, and they came up with that name, banana in a box. We did not come up with that. But it represents property binding and input binding, so two-way data flow.

[00:04:08]
And you can use banana in a box on your own components like an attribute that you make by following a strict naming convention that we provide, then you can use the syntax to take an input and an output input into one thing. Okay, you can do it. You can do it if you want to.

[00:04:26]
So what this means is this, user name comes from your component value cuz you're binding it with the square. And when it changes, it gets updated back to your value. So you could set the value programmatically with those box, and then if it changes box, you see, that's what those two words together, square parenthesis, okay?

[00:04:47]
Yeah, okay, so it's probably binding and event binding. All right, and then you get your ngModel for password, same idea. Okay, same idea. Now, in our component we got our forms module, we got to bring that in so we can make things work. And then we got the username and password, okay?

[00:05:09]
And so if we go back, you see the username and password there? That's what those represent. But if you were to take away, so look at this. Just check the screen out for me for a second. You know what's really interesting about the screen? How can you tell that this had anything to do with the form?

[00:05:28]
>> Forms module.
>> That's really the only hint, right? But let's say you took away the decorator. There's nothing to tell you that this is a form related. That's why it's template-driven forms. Because the template has all the form information. That's why we call it template-driven forms cuz the template is driving all your form information here.

[00:05:50]
Versus what we'll see with reactive, it's gonna look very different.