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

Lukas introduces ngModel, which enables two-way data binding within a form.

Get Unlimited Access Now

Transcript from the "ngModel" Lesson

[00:00:00]
>> Lukas Ruebbelke: I forgot, how many people here have done One.X development? And so we're pretty familiar with like ngModel. So same thing here, we've seen it already, the two-way data binding. Now, what's interesting, with One.X is there was this thing called Form Controller. That when you created a form, whether you do it or not that Angular was creating this FormController.

[00:00:25] So it's just like any other controller in Angular JS, it was creating a FormController under the hood. The reason why that was happening is because with every form there's kinda two things that you need to track, the state of the form, and then the data of the form.

[00:00:44] By state I mean is invalid, is not valid? How is it invalid? What's the data in the form, and how is that making it invalid? So, there's kind of these two things that you need to track, because obviously you want to assert requirements, on your form. Like is minimum length, maximum length, is this an actual valid email, is this required, etc.

[00:01:11] So under the hood, with ngModel, Angular is creating what is called a FormControl. And so essentially it takes the domain model, whatever it is, and binds it to a form element. We can actually have access to that by creating a local variable, and referencing ngModel. And so what this looks like, at a very kind of microscopic level, I wouldn't actually do this specifically, but at a FormControl level, you can say I have an ngModel,

[00:01:49]
>> Lukas Ruebbelke: And I want to reference it. And what this allows you to do is, well, I'll just actually show you. So if we hop into our code, just close this all down, and let's do this in items.
>> Lukas Ruebbelke: So we have this input here, so I'm just kind of breaking this onto a couple different lines

[00:02:25]
>> Lukas Ruebbelke: Let's go local reference nameInput = ngModel. So I'm creating a local variable called nameInput and I'm passing in ngModel. So I'm saying, create this variable, here's the value for it. And from here I'll do another horizontal rule, and let's go nameInput, and we'll go value. And while we're at it, we'll do another horizontal rule and we'll go valid.

[00:03:04] Hopefully this works, we'll see.
>> Lukas Ruebbelke: And since we did this in items, so there's no value, but it is valid. So you can see once I start typing it, this fills it in. So I am able to basically track the data on the element, but if I went back into the code here and I added in, let's do required, so now it is required.

[00:03:39] And we go back
>> Lukas Ruebbelke: Is it valid? No, now it is.
>> Lukas Ruebbelke: So we're doing this at a FormControl level. So we're saying we have this element that we want to control. And really, there's some additional methods, but the two ones that you need to know is that there's a value property, and a valid property.

[00:04:13] Before I forget, I'm actually, I'm going to actually take this off, cuz we're going to expand this in just a moment.