Check out a free preview of the full Building Awesome Web Apps with Angular 2 course:
The "Template Driven Forms" Lesson is part of the full, Building Awesome Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Lukas introduces the FormsModule, controls and validate styles in order to create and manage forms in Angular 2.

Get Unlimited Access Now

Transcript from the "Template Driven Forms" Lesson

[00:00:00]
>> Lukas Ruebbelke: There's two way to tackle forms in Angular 2. You have template driven forms and reactive forms, and we are going to today tackle template driven forms. This is the closest or this is more close in line to how forms are handled in Angular 1 and I think in terms of getting up and running, this is by far the simplest.

[00:00:28] So we'll just start, template driven forms and we'll go from there, cuz I think once you understand template driven forms. It's really easy to kind of make that leap into reactive forms where you are essentially declaring your form model, your underlying model in the component and not in the template.

[00:00:50] So we're going to talk about the FormsModule, Form Controls and then some validation or more specifically, Validation Styles. So first and foremost, in courtesy of the Angular CLI, we do not have to worry about this directly. But if you're going to use forms, we need to import the FormsModule.

[00:01:13] So, this is not part of Angular Core. So if we go into our code base, you will notice that, just close all this down real quick.
>> Lukas Ruebbelke: In the app module, we are importing the FormsModule. And within our imports, we're importing it as well. So now essentially, we're making forms available to our application.

[00:01:46] Now if this was reactive, if we were doing, essentially forms, we would need to import that module. So, so far so good. We want forms. We need the FormsModule. Boom, done. Well, ngModel. So, that's pretty cool. I think everybody, we know about this. I've only been hammering at it for two days as the poster child for two-way data binding and what this does is under the hood, it also creates a FormControl.

[00:02:21] And so if you remember when I was talking about, you have a form that represents some data, but equally important is we need to keep track of the state, of the form and that is where FormControls or FormGroup. So a form group is just a group of form controls.

[00:02:47] But we have this underlying mechanism under the hood that is used to keep track of essentially not only the data or the state of our form, but rather the condition of the form. Is it valid? Yes or no? And so we saw kind of a mini example yesterday, but we'll jump into that in a moment.

[00:03:09] And so in fact, let's just do that now. Why not?
>> Lukas Ruebbelke: So if we go to I don't know,
>> Lukas Ruebbelke: Let's go to actually widget detail.
>> Lukas Ruebbelke: And I wanna see if I can actually work in here without actually solving your challenge for you, we'll see. So if we create a form, actually I don't even need a form.

[00:03:43] Let's go input.
>> Lukas Ruebbelke: NgModel.
>> Lukas Ruebbelke: Let's say, my value.
>> Lukas Ruebbelke: Actually, let's do, I don't know. Title and we'll go my input.
>> Lukas Ruebbelke: And then what we'll do.
>> Lukas Ruebbelke: So using the local reference variable, we're just keeping track of this input. And then from here, we can pull some information off.

[00:04:53]
>> Lukas Ruebbelke: Here we go. Now unfortunately, because we're calling to JSON, sometimes this breaks and you create like a circular reference where you're kind of referencing something that references something else that references itself and I think this will probably throw up and it did.
>> Lukas Ruebbelke: So, let's go back here and we can do value.

[00:05:28]
>> Lukas Ruebbelke: Now, what I also want to point out here.
>> Lukas Ruebbelke: Is you can also track. So using the local reference variable, you could essentially track the value of this input, but it's not essentially true to a data.
>> Lukas Ruebbelke: Let's go back. And so I think I have to, so what you have to do is essentially create another event for that to update.

[00:06:02] So you notice here, I'm typing and so I don't want to get in the weeds here, but you can go here, here. And once you do that, that will update. So by having ngModel up here, it forces that tick and allows it to update. So, let's back this up and let's continue.

[00:06:37]
>> Lukas Ruebbelke: More so, actually, let's back this up even more.
>> Lukas Ruebbelke: So we can directly, actually reference. So before, I was actually not referencing the ngModule on that element, but using myInput ngModel, let's see what happens if I go here.
>> Lukas Ruebbelke: Is this gonna throw up or not?
>> Lukas Ruebbelke: Again, circular reference.

[00:07:24] More so, what I wanna try is.
>> Lukas Ruebbelke: So, let's just talk about what I've just done.
>> Lukas Ruebbelke: So using a local variable reference.
>> Lukas Ruebbelke: Like this, I can pull just, I'm basic creating a reference to the input and then using .value, I can pull the value off of that input.

[00:08:19] Not particularly well, it's a way to actually pull, essentially values off of inputs without binding to it. The caveat to that is in order for you to get the latest one, you essentially need an Angular tick or some Angular event for that to update. Yes.
>> Speaker 2: What's the significance of ngModel, because title then if it's my input that it's referencing?

[00:08:43] Where does title come into place?
>> Lukas Ruebbelke: So now, this is we're binding this input to the value of title on the component class. So, let me just set this here.
>> Lukas Ruebbelke: Why am I here man!?
>> Lukas Ruebbelke: Let's go back.
>> Lukas Ruebbelke: So essentially, we're using ngModel to set the value of the input and to track it, but then we can also bypass ngModel and just get the underlying HTML value creating the local reference.

[00:09:39] So when you actually just set, essentially pound some variable name, that would just reference the element itself, cuz we're not assigning it to anything. And so now if I go like this, you can see that they are essentially one in the same. Because when I update ngModel, it's updating the value of that input.

[00:10:01] So, this is just a lower level way to reference that.
>> Lukas Ruebbelke: Now if we go back here.
>> Lukas Ruebbelke: If I go like this and this is.
>> Lukas Ruebbelke: Where things get interesting. We can actually reference my input or this local variable to point to the underlying form control on this element.

[00:10:35] So now, we just go like this.
>> Lukas Ruebbelke: Let this refresh.
>> Lukas Ruebbelke: Because this is required.
>> Lukas Ruebbelke: Our ngModel, which is essentially a form control. This is keeping track of the value and the validity. So really just think of value, valid. What's the value? And is it value? But notice now that it's empty, it's saying, this is false.

[00:11:15] No [FOREIGN]. But then once I type it up, instantly, I now have real-time basically feedback of the state of this input. So anybody who is doing forms in their application, especially line of business apps. Validation is a big part of this and this is how you keep track of this.

[00:11:41] So, Angular's put or done a really good job of creating kind of this underlying form control to keep track of the validity of your form. And because there's times, like it's not in a valid state, we do not want to proceed or if it's not in a valid state, we need to convey that to the user.

[00:12:04]
>> Lukas Ruebbelke: And so right now, we are referencing ngModel via a local variable in and of the self. I think this is good for demonstration purposes, but where it really gets interesting is when we start to do this in the context of an entire form which we'll see in just a moment.