Building Awesomer Apps with Angular Form Controls
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Form Controls" Lesson
>> Lukas Ruebbelke: So we're tracking the value and the validation status. So FormControl, so this is ngModel, basically it's doing this under the hood, implicitly, is creating value validation. Now we can group these together in FormControl. So let's say, it's possible you could have a form with one field, but more often than not you're going to have multiple fields, aka FormControls.
[00:00:26] You can group them together with FormGroup. So FormControl, FormGroup, and so I will just say this. When I started to try to wrap my mind around forms in Angular is that it's this kind of ascending kind of level of things stacking on each other. FormControl is at the very bottom.
[00:00:48] And then FormGroup sits on top of that. You can also have FormErase. You can actually have an array of FormControls. And then you have a top level FormGroup for the entire form which is what we're going to look at now. So, ngForm, so we have ngModel is for a single control.
[00:01:07] ngForm is essentially the FormGroup, so then it's just a group of FormControls. It's basically tracking the value in the validation state of the entire form. So you just start to search FormControl, FormGroup. And so you can actually have sub-groups, but the big thing is every form has a top level FormGroup that's tracking the state of the entire form.
>> Lukas Ruebbelke: So let's see what this looks like.
>> Lukas Ruebbelke: So we have formRef, so I'm trading a local variable named formRef and I'm passing the value of ngForm. And so just like FormControl, it allows us to track the value of the form and the validity of the form. So let's see what this looks like.
>> Lukas Ruebbelke: So in this case, our form, if I go,
>> Lukas Ruebbelke: myForm, so this is arbitrary, and we'll go ngForm.
>> Lukas Ruebbelke: Then we'll track.
>> Lukas Ruebbelke: And let me put require back on this.
>> Lukas Ruebbelke: I will say one thing real quick is that for formControls, if you're using ngModel, you need to put the name property on there.
[00:02:32] So there needs to be a name property on the element for that to work. So I've done ngModel model without the name, and it's like, I don't know what to do. And so if that happens, make sure that you have given your element or your input a name property.
[00:02:46] All right, so now let's hop back into the browser and see what has happened.
>> Lukas Ruebbelke: So if I undo this, this should be false, over here. But you'll notice that it's just dumping the object out. So what I need to do here is do a json, and let's just wrap this in some pretext here.
[00:03:19] So now you can see that it's actually taking the form, the elements in it, the controls, it's actually parsing it into a JSON object, which is interesting. Think about that. And when you get into Reactive forms this becomes a little bit more important cuz a lot of times what you'll do is you'll actually with ngModel, is you're affecting or mutating a property on a single object.
[00:03:45] But what if you can isolate that mutation and then just grab that object whenever you need it? Well, it exists on the top level FormControl. So right now, using template driven forms, it mutates the model. Every time you change something, it is essentially mutating the underlying data model.
[00:04:04] But you can still see that it does indeed exist on the FormGroup as well. And so when we get into Reactive forms, what we're doing is we're saying, we're just doing a clean separation. Saying, we're adjusting this form, but we're not actually going to write it back to the model until some predetermined event.
[00:04:23] But you're very explicit, so this is really handy for data mutability. So if I delete this, you can see that this is false. It is required. Put it back in. It's true. So FormControl, FormGroup using ngForm, we get reference to the top level FormGroup control that gives us access to the entire one, the data model for it as well as if it's valid or not.
[00:04:54] Then what I can do, I'll just take this one step further. Is if we go here, on the Submit button, disable, my form, we'll say,
>> Lukas Ruebbelke: That's not valid.
>> Lukas Ruebbelke: Oops, then disable this.
>> Lukas Ruebbelke: You can see now it's false and I can't save it. That's good
>> Lukas Ruebbelke: True, I can click this button.
>> Lukas Ruebbelke: Does that make sense? So now, just when you think of forms, value, valid. Is it valid? What is the underlying values? We do that with FormControls and FormGroups. Or specifically, you would generally work just directly with the top level FormGroup.
>> Lukas Ruebbelke: But I think the fact that Angular is actually keeping track of all this for us under the hood is sweet, thanks.
[00:06:06] If you've ever done a similar thing with like jQuery back in the day, they're essentially the same. Any time somebody submitted something or did something, you'd have to actually go and parse the dom, pull the data out of it, and really tricky. I mean, one of the big things with Angular One is that you can actually bind an object directly to the form and you didn't have to actually go and pull this data out of the dom, which is a horrible place to actually have application status in the dom.
[00:06:32] It's the worst. So with that said, I think, I've been kind of doing the demonstration as I've went along.
>> Lukas Ruebbelke: Yeah, so formRef.value valid, and this whole pre-curly braces JSON just, if anybody got a tattoo on their forearms, you just remember that. I use it all the time, super valuable.
[00:06:57] And I'll mention this again when we talk about debugging is, this is just the easiest way to dump something out to the stage. I just use the pretext, so just leave it in as pre-existing formatting. And then just turn it into a JSON structure that I can dump out.
>> Lukas Ruebbelke: So then what you can also do is group elements together using ngModelGroup, and so you can see here, let's say you had cuz you saw how to automatically turn that into an object, using form rev.value. Well, if you wanted to kind of massage that object to match something in your actual domain, in other words, you have another user and I want the name to be name and then first and last address or whatever.
[00:07:46] So you want it to actually create a little bit of a hierarchy to maybe match the data structure at the back end. So using things like ModelGroup and FormGroup, you can actually nest these things in there to have the form exactly produce the object that you're working with in the rest of your application.
[00:08:05] So you can see here that it's actually creating a user property and then attaching the object to that.