Build Web Apps with Angular 2 Submitting Forms

Transcript from the "Submitting Forms" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Lukas: Does anybody have any questions? Yes?
>> Speaker 2: The top of your form you have a variable name group it looks like. You built an NG form.
>> Lukas: Mm-hm. This one right here?
>> Speaker 2: No. Next line down. Name group, # Name Group.
>> Lukas: Yes.
>> Speaker 2: So is that just taking ngControl group value as a variable and then assigning it to ngForm?

[00:00:35]
>> Lukas: So I'm gonna to struggle to explain this.
>> Speaker 2: I'm just struggling trying to cuz there is actually some magic going under the hood, here.
>> Lukas: So, when, hold on one second. I may be able to connect the dots here.
>> Lukas: All right. [LAUGH]
>> Lukas: For every form, Just like in Angular 1, you get this thing attached to it.

[00:01:06] In this case, it is ngForm. And so now, what we're doing is, we have this ngForm thing floating out here. We need to create a local reference so that we can actually do something with it. And so this is very much like in Angular 1, you would actually have to give the form a name.

[00:01:25] So in this case we're saying, we're gonna create this local variable called name group. We're going to attach it to form. Which we're then going to attach to our control group. And so, what this is doing, by creating this local variable passing it into our control group. We are now connecting this underlying form directive and the state.

[00:01:51] Really what we're doing is we're controlling this to this model right here. And so, we're simply saying now what we're doing is we're taking this person object and we're, so when you have a form you have two states. You have the actual values in the form and then you have the state of the form, so for instance is it in a valid state.

[00:02:17] Has it been touched? You know what are the validaters for that? So enabler one you would actually dump out the form group and you could see that. And so this is essentially the way that they are doing it and it seems to be kind of a bit of a magical way, but we're simple saying now.

[00:02:34] Because angular two will actually generate these form groups for you on the fly, like implicitly. So like they'll just happen or you can manually create them. So you can say I want to explicitly create these and the best way to do that is using form builder. But we're saying I want to take this form and I want to set it as my control group for this, so the actual form directive, and then I want to connect it my data module.

[00:03:12]
>> Speaker 3: So if we were to create another Group, you could attach it to the same ng form. You would attach it to the same ng form then. So if you have a name group, let's say you had an address group, you would follow the same process and pound address group.

[00:03:29] You go to the ng form., and now you have a name group and address group available.
>> Lukas: Yup, so it allows you to actually break this up and kinda group so with Angular 1 you kinda had just this one thing. And now, what you can do is say I want to apply specific behavior to these two fields, but for this group I wanna do this.

[00:03:51] And so it allows you really fine grained control over one, how you control each element in your form. And so, I think for me that's where the confusion came in is, like I was used to dealing with everything on a per form basis. And now, they say, no, no, no, no, we're not gonna give you the form controller.

[00:04:09] We're actually going to give you, basically, just a form control, a single one. Then we're going to allow you to group it. And then we're going to give you the form builder to attach additional things like validators. Which for me is going from, Hey, model is completely sufficient And verbally.

[00:04:31] I know that's naive because eventually if you're doing [INAUDIBLE] applications, you're running to a situation where it's like. I would like to use or not to submit this until they filled this form out into an appropriate state. And so that's where, you can do it with control group.

[00:04:50] Or you know, even a single control, but I think that form builder by grouping it together allows you to, actually yeah with form builder allows you to actually add in the different validations for that.
>> Speaker 3: And then there's one builder per form?
>> Lukas: To the best of my analogy, yes.

[00:05:08]
>> Speaker 3: Yeah. I'm sure you find an for everything, right? Yeah. So in that case you would have builder group you could have address groups-
>> Speaker 3: Okay.
>> Lukas: And so this is really Kind of an interesting thing for me to try to explain, even with Angular 1, what's all this magic happening under the hood?

[00:05:33] If somebody does a form all of a sudden they're getting these styles reflective of input, what's going on? And this is kind of the same thing happening with providing this N G form kind of directive that you can point to using a local variable. So, hashtag local variable for the wind.

[00:05:55] And then now, we can go in and say: hey what's the state of this. And that's how we're able to, in here, and let's just jump in here, we can modify this. And you can also see this in action when you, do we need to submit. So, for instance, here we're doing the same thing.

[00:06:26] We're creating a local variable person form, and we're saying hey, it's this form. And then when we call submit we're just passing that in. And then down here We can say is this valid or not. Just like an angula one, angula two is providing a mechanism for us to not only know the data model of the form, but the state of the.

[00:06:52] And so this is actually a better way to visualize this with every form you have NG form that you can bind too, so you create a local variable. And then, you can do something with that. In this case, we're just finding the to submit event and we are passing it in to submit form.

[00:07:16] And then, in this case I am just going to fill this in, so this is a little weird. Angular material is doing something odd, but you can submit. And then we get this, but we can know right away that this thing is not valid. So how we're doing that is by creating a reference to the form, so we're saying ngform equals this local variable, and then now we can access it and know things about it.

[00:07:54] Also, you can do just like in Angular 1 .air and you can attach different CSS styles, etc. Any questions about that?
>> Speaker 4: I think I'm still a little confused on this notion of naming group. Your, not that one in the editor. Go back to With the term.
>> Lukas: It's in here somewhere.

[00:08:25]
>> Speaker 4: Yeah, so you've got a local variable you just called nameGroup, right? Now is that sort of arbitrary compared to the one you've got down in your builder?
>> Lukas: So name group is completely arbitrary.
>> Speaker 4: Okay, and then the one that's next to it for the control group?

[00:08:45] Is that referring to the one next to it or the one down below?
>> Lukas: So what I'm doing here is I'm saying this control group equals this main group.
>> Speaker 4: Okay, all right.
>> Lukas: So what you're able to do. Let me see if I can find this in the documentation where they talk about this.

[00:09:02]
>> Lukas: I had to read this a few times,
>> Lukas: Hold on.
>> Lukas: So in the docs here, you can see real quick, again, just a variation of what we saw earlier. They're creating a local variable, F, so that's totally variable. And they're saying, when we submit this. Just pass this in.

[00:09:41]
>> Speaker 4: So I noticed you're doing it that way in your example, your but based example. And then, in your IDE you're doing it that ngform control in bracket equals personform or something like that? But those are one and the same?
>> Lukas: Let's see here.
>> Speaker 4: So there ngFormModel = personForm.

[00:10:06]
>> Lukas: Mm-hm.
>> Speaker 4: And then if you go to your example in your browser.
>> Lukas: [NOISE] Up here?
>> Speaker 4: Nope.
>> Lukas: Or the other one.
>> Speaker 4: Other one, there you go, pound person form engine form. So I'm assuming those are one in the same?
>> Lukas: So this is just a local variable.

[00:10:39] Well, so you can do this as many times as you want, I don't know, this is, I may have jumped the tracks on splitting this together. So here you can see that we are doing like, this is happening In a few places, just, I would ignore that. You only need to do this once to have access to the entire thing, so I will update this to be less confusing.