Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Introducing Reactive Forms" 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:

After stating that the two critical roles of a form are to keeping track of the data and ensuring the validity of the data, Lukas introduces reactive forms, which is an Angular technique for creating forms in a reactive style.

Get Unlimited Access Now

Transcript from the "Introducing Reactive Forms" Lesson

[00:00:00]
>> Lucas Ruebbelke: So yesterday in template driven forms we learned that there's kind of two main things that have to happen with a form. So one, we have to keep track of the data driving the form as well as the state of the form meaning is it in a valid state and why or why not, is it?

[00:00:23] So what happened? Is something required or do we have password requirements or whatever that will be keeping track of the data and the validity of the form? And we saw by referencing NG model and NG form that under the hood, we have this hierarchy of things that is being inserted behind the scenes into our form that's keeping track of all this.

[00:00:49] And so to kind of walk through this again in review, we have a form control that tracks the value and validation of an individual FormControl. So if we have an input, there's a FormControl for that. Select box, radio box. Anything that is a FormControl, it gets a FormControl.

[00:01:13] I see what they did there. Now, you can actually group these together. And so, not surprisingly, this is a FormGroup.
>> Lucas Ruebbelke: FormGroup is something that is JavaScript. And you work with it in the JavaScript context. But you’ll use the FormGroup directive to bind that FormGroup that you declared to a DOM element, so we'll see this in a moment.

[00:01:44] So you have a FormGroup but you need to actually bind it to the form. So this is a step that did not exist with template driven forms. In this case, we're saying we are going to explicitly declare our FormGroup. And then we're going to explicitly, using the FormGroup directive, bind it to this form.

[00:02:03] Now what you will also do is, say I have this FormControl that I defined in my FormGroup. So the first two, FormControl and FormGroup, these are the things that we actually define in our JavaScript in the imperative context. And on the element we now say, I need to bind this control to this element.

[00:02:28]
>> Lucas Ruebbelke: And so really the difference here in kinda template driven forms to reactive is in template driven forms, everything is just happening behind the scenes. Other then setting a local template variable, you generally do not interact with the form group or the form control directly. With reactive forms, you have complete access to that.

[00:02:53] And it's pulled out, put back into your class and then you use that to wire to your forum. So you're kinda just inverting the control a little bit. And so FormGroup directive, FormControl name binds FormControls and FormGroups. Then, there's one more piece, which is called FormBuilder. And so this is essentially syntactic sugar that just allows us to kinda build up larger forms quickly.

[00:03:24] So you can say I have a group, and I have a contol and I have an array, and so different things. Let's just put it all together into one big FormGroup and we'll use FormBuilder to do this. So this is just a convenient mechanism to do this. So let's see the simplest version of this, so we'll start with a simple version, and then we'll go to a simple-ish version.