Build Web Apps with Angular 2 Form Builder

[00:00:01]
>> Lukas Ruebbelke: In this module we are going to talk about Forms. Now Forms is interesting in Angular 2 because, quite frankly, they have changed everything. So with that said I'll make a bit of a confession. Or rather being that I am a fairly lazy individual
>> Lukas Ruebbelke: That.
>> Lukas Ruebbelke: I have found within a form simply using ngModel to bind to an object on your component that you then modify, make your updates, and then when you're ready to do something, then you bind to a click event and you emit it.

[00:00:58] Emit it. It sounded like I said admit it. Admit it, you emit it. And so this is a minimum viable form. And so when we get to the challenge, if this is approximately what you had, this would be totally fine. Now, in Angular 1, we have ngModel as well, and it provides to a data binding, pretty straight forward.

[00:01:29] But then when we think about it, there's are lot of other things to help us along. So for instance, we had the form controller in Angular 1 and that got created behind the scenes implicitly that every time you created a form Angular would come, like swoop back around, and create this controller on your form to keep track of that state.

[00:01:55] And so that still exists. You have now what it's called a form control, which you can manage an individual control or an individual input, or form element. Then you can bring those together and group them together, and so you can have a group control. Let me just go down here.

[00:02:29]
>> Lukas Ruebbelke: And so you can have a form control, a form group control. And then, where I think it gets interesting, is then they have bundled that all up into a form builder, which I think is the most interesting. So just to reiterate real quick, if you simply want to get the state, or rather the value, of a form you can use ngModel.

[00:02:52] If you wanna get the state of it, then you use a form control. If you want to group those together, then you can use a group control. But then, if you want to have more programmatic control, so for instance, applying validations and different things to this group of controls and do more of a data model driven approach, a form-driven or to forms, then you use Form Builder.

[00:03:18] So this is what we're going to discuss here is form control, form group control, Form Builder, and then we'll also talk about how to submit the form as well.
>> Lukas Ruebbelke: Let me just see what I got here.
>> Lukas Ruebbelke: Yeah, all right, so let's just.
>> Lukas Ruebbelke: I'm gonna skip the slides for the most part, and we're gonna jump straight into the code.

[00:03:55]
>> Lukas Ruebbelke: So first and foremost, again, I was talking about the minimum viable effort to get the value from an input and move it somewhere else. This is ngModel. And we've been kinda playing around with this.
>> Lukas Ruebbelke: All day long. Let me just go into the demo here. And so now you can see that-.

[00:04:21] I wanna update this, actually, let me bind something here real quick. I'll just go with h. Then we're just going to bind to-
>> Lukas Ruebbelke: selectedItem.
>> Lukas Ruebbelke: I really should just turn this into a live template. All right, let's refresh.
>> Lukas Ruebbelke: So here, you can see now we have our object and then as I type it things are happening.

[00:05:01]
>> Lukas Ruebbelke: So let's look at the other end of the spectrum and then we'll kinda work to the middle. So Form Builder,
>> Lukas Ruebbelke: We start out by importing form directives, and so just like in Angular 1, when you have a form, Angular 1 also has a form directive that goes through and attaches things to it.

[00:05:29] This is where form directives come in. So when you import this, then any time you import a directive, and it goes into the directives array, so any of our components that we've developed, that in that template, if it recognizes any of those selectors, it's going to attach that component to it.

[00:05:50] So in this case with form directives, now it's looking and it's saying here's this form, and because we have form directives on this component, it's going to basically extend or augment the standard form just like in Angular 1 and provide additional functionality.
>> Lukas Ruebbelke: From here, we are injecting Form Builder and all Form Builder does is it takes a group of controls and allows you to attach them together.

[00:06:33] So in this case, let's just look at the code in the IDE.
>> Lukas Ruebbelke: One second here. Let's clear the deck and we-
>> Lukas Ruebbelke: So now I've created this kind of wonky object here. I was actually just seeing if I could define the shape of something on the fly, but we have this person, my first name is Luke, my last name is Ruebbelke, and this is my top secret password.

[00:07:17] And now what we're doing is, we are generating essentially a new instance of, or we're calling Form Builder and we're saying group these things together in such a way that when it renders, we have this object that we can do things with. So
>> Lukas Ruebbelke: You notice here that I have like ngControl, and ngControl, ngControl and so when I add ngControl to an element, so remember Form Builder is just a group of controls, that when I add ngControl, I now have access to the state of this input via this name here.

[00:08:11] So
>> Lukas Ruebbelke: Now when this renders we can do things like, this is no longer valid. And so, Form Builder is basically programmatically generating this for us and allowing us to add validations to the fields. Now it is. And you can notice that as well the input or your button is disabled, because you are no longer in a valid state.

[00:08:49] So I'm going to put in my password again. Now it's ten characters long, super. So we'll go back into how we're defining this.
>> Lukas Ruebbelke: So we're creating a group, and we're saying this is first name, last name, and in here, so we want to actually bind to this object, and we want to set a validation to this.

[00:09:21] So, in this case we're saying this is required. You can also group your validators together using Validators.compose. So you can see here that we're saying not only is it required, but we want a minimum length of ten. Just see if I can hop into here.
>> Lukas Ruebbelke: And then, so individual group, ngControl, and then we're actually grouping these together using control group.

[00:09:57] So this is just a way to kind of organize those. So, when I first saw this I was fairly confused. I was like well, what is going on, like what's the point of this. And there was kind of, just like in Angular 1, there's a lot of things kind of happening under the hood.

[00:10:14] The simplest way to think of it, is that you just have a control for each input, you can group those together with a control group and then you can get the state of that. So for instance, if you look here, we have our Form Builder, the group that's been returned by Form Builder.

[00:10:32] And we're simply saying is this valid? So this is very similar to Angular 1 when we do something like dollar valid or pristine. And so a lot of those properties still come through. And actually, let me just see here real quick. I think I can,
>> Lukas Ruebbelke: I know we have required.

[00:11:00]
>> Lukas Ruebbelke: Just curious real quick, what is on
>> Lukas Ruebbelke: So required minLength, maxLength, pattern, null and then compose that we saw that allowed us to put this together. So these are kind of the basic ones that we had with Angular 1. The upside is, it's a post Angular 1 where you have to do like ng-min length, and then set that in there on the template.

[00:11:29] You are now actually able to do this programmatically here.