Check out a free preview of the full Building Awesome Web Apps with Angular 2 course:
The "Form Controls" 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 demonstrates how to group and validate FormControls within a FormGroup.

Get Unlimited Access Now

Transcript from the "Form Controls" Lesson

[00:00:00]
>> Lukas Ruebbelke: So, Form Controls. This is what we've been seeing in the code and it's responsible for tracking value, and validation. You can also group FormControls with FormGroup.
>> Lukas Ruebbelke: So let me see, I think I have this in here.
>> Lukas Ruebbelke: So using ngModelGroup, you can actually bind these together or actually group these together, but let me just backup and we'll talk about that in a moment.

[00:00:37] So the idea is you have a FormControl, but then you can group them together in a FormGroup. And just like we created a local reference to ngModel, we can reference the entire FormGroup in the form using ngForm. And so this is where it does get a little weird on the naming convention is when you wanna reference the top level FormGroup, it's ngForm, but then you can then create a FormGroup manually using ngModelGroup.

[00:01:10] And so, let's see what this actually looks like in the code.
>> Lukas Ruebbelke: So, we have a single output. In order for this to work, we do need to go form no action. Let's do novalidate and.
>> Lukas Ruebbelke: We'll go myForm. Now instead of ngModel, we're going to reference ngForm.

[00:01:53]
>> Lukas Ruebbelke: Rather myForm, here we go. So this is ngForm and then we can now see this, but there's gonna be one caveat here and we've thrown an error. The reason being is and actually I'm pretty happy about this, because this actually did not used to be like this.

[00:02:17] So if you're using ngModel within a form tag, either the name attribute must be set or the form control must be defined in ngModelOptions. So what this means is wow. Actually, I didn't even notice this. I just saw what I need and I moved on. They actually give you some examples here.

[00:02:40] So, thank you, Angular Core team. This is helpful for the the first time ever. Let's see here. Let's just close this and back to here. So, what we need to do here is we just need to give it a name. And so, what this does is Angular uses the name property to wire it in to the form group.

[00:03:12] So if we go back here, now we put name on it
>> Lukas Ruebbelke: We now have an object that represents our entire form? Well, that's not so impressive. We only have a single element. Let's spice things up a bit, because yellow. If I can't have a drone deliver my cookies, then the next best thing is creating complex forms with more than one input.

[00:03:53] Imagine that. So, we'll go description.
>> Lukas Ruebbelke: And so now, we can see here.
>> Lukas Ruebbelke: That not only are we keeping track of all the values in our form, but also the validity.
>> Lukas Ruebbelke: Let's do one more, just because I really.
>> Lukas Ruebbelke: Let's go div.
>> Lukas Ruebbelke: Wait for it.

[00:05:22]
>> Lukas Ruebbelke: Hold on, I forgot one thing. Text, text, text, text, text.
>> Lukas Ruebbelke: So because I am using ngModel to bind to a property that does not yet exist on my component class, you notice that when it initially loaded. So, let's just refresh this. It is not showing up in the FormGroup, but you'll notice using ngModelGroup.

[00:05:54] I believe is what I called it. Yes, we are now essentially grouping this form into an object that you're allowed to essentially nest these properties into some object that I think it's a little bit more descriptive of essentially your domain model. So this is helpful when if you actually wanted to submit, you could just send the entire basically form object bag and pull it off.

[00:06:28]
>> Lukas Ruebbelke: But you'll notice that status is not there until you fill it out. The reason being is cuz I'm not defining in my controller class.
>> Lukas Ruebbelke: To the max. Refresh.
>> Lukas Ruebbelke: There we go. So then the minute I delete one of these, it's saying, hey, the form is not here.

[00:07:08] So Russ asks, can you show an example of using more than one model and a form? A nested form with associated models.
>> Lukas Ruebbelke: Well.
>> Lukas Ruebbelke: Unless I've misunderstood the question, this is I mean, this is how you would nest it. And in a sense, these title, description and status are kinda three independent things b or models.

[00:07:42] I mean, so what you could do even is group these together to.
>> Lukas Ruebbelke: Let's say, like.
>> Lukas Ruebbelke: Widget, description, some description, then you can come back here and we can go some widget .title. SomeWidget description.
>> Lukas Ruebbelke: There we go. So essentially, we're just taking an object and then we're binding the fields to the properties on the object.

[00:08:54]
>> Lukas Ruebbelke: So, Javier wants to know how would you validate a custom component? I imagine the custom component would have to admit whether it's valid or not. Is there another cool way to do that? Yes, there is another cool way to do that and it is tricky, essentially how do I.

[00:09:28]
>> Lukas Ruebbelke: There's one particular blog post that, here we go.
>> Lukas Ruebbelke: So, I'm going to delegate this as homework. So again, bringing up Pascal Precht and his amazing contributions to the Angular community is he talks about creating custom form controls in Angular two. And so, this is phenomenal and you can actually have a custom thing.

[00:09:57] And so generally, when we think of a form, we think of like, inputs, radio buttons, etc. That you can create any element and cause it to essentially validate as if it were a form element, a native form element. And the way to do that, let me see if I can get to the punch line here.

[00:10:16] Wait for it.
>> Lukas Ruebbelke: Is using. So one, this will hook, you use control. Let me go backup to the top. So, essentially using a custom control value accessor. So this is kind of a pretty advanced topic in Angular two, you can by implementing or creating this custom value accessor you can cause an element to behave like an element on a form.

[00:11:02] So let me go down here, hold on real quick. I don't wanna go too deep into this, but this is how you do it.
>> Lukas Ruebbelke: Is you, essentially create an input component that implements the control value accessor interface and then from here, then it basically operates or behaves like a form element, in so much that you can get ngModel on it.

[00:11:32] Actually, ngModel will work. And then from here, you can also do validation. So that is really, the nutshell on that. So you can do that, control value access. Or if you just Google, how did I get here?
>> Lukas Ruebbelke: We've got some form controls in Angular two. But if I RAM and this does work, because I actually did something like this a couple of weeks ago using this blog post as kind of the foundation.

[00:12:11]
>> Lukas Ruebbelke: So now-
>> Speaker 2: Could you respond back again to Russ? He's looking for something a little different than what you had initially said.
>> Lukas Ruebbelke: So unfortunately, I don't know if I understand the question.
>> Speaker 2: Yeah, I'm not sure I do either, but I'm trying to answer. I don't know, let me give it a go and then we'll see where it goes.

[00:12:31]
>> Lukas Ruebbelke: Sure. Because if we're talking about Rails models and nesting those, that's something that I'm unfamiliar with.
>> Lukas Ruebbelke: I think we have one.
>> Lukas Ruebbelke: Here formRef, we're pointing it to ngForm, ngModel,
>> Lukas Ruebbelke: And then here, we can essentially check the value of the form as well as the validity.

[00:13:12] We can group this together using entry model group. So, this is just a way to kind of segment your data model in your form.
>> Speaker 2: And as we saw earlier, but this is here in the slides, essentially you now are able to nest properties on the object.