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

Lukas goes through the code of a reactive forms example.

Get Unlimited Access Now

Transcript from the "Reactive Forms Demonstration" Lesson

>> Lukas Ruebbelke: Just like the forms module, when you're moving two Reactive forms you need to import the Reactive forms' module.
>> Lukas Ruebbelke: So pretty easy, if you have Angular forms you just go in, you import it. With that said is you will need to also add it to your imports in your Angie module but, I think we're pretty solid on how to solve that dependency.

>> Lukas Ruebbelke: And, this is what a FormGroup looks like.
>> Lukas Ruebbelke: So, form = new FormGroup, so form could be anything. And you're simply saying create this new FormGroup and I'm sending you an object that represents the form that I want to create. And so here's a group that essentially represents this form, and then I wanna have the FormControl that is of name first and a FormControl of last.

[00:01:00] So you can imagine, like first name last name, so pretty much every field gets one of these. And then from here you can add in the validators and some different things. So if you have more than one that kinda goes into an array, and you can kinda stack it up.

[00:01:14] And do some pretty sophisticated things in the JavaScript context that's not available from just the template base, working with it from the template.
>> Lukas Ruebbelke: And so now, remember, we talked about the FormGroup directive, where we created the form now we just attach it here, FormGroup.
>> Lukas Ruebbelke: So we define the FormGroup object and then we hook it to the form using the FormGroup directive

>> Lukas Ruebbelke: And then from there, we have access to the form in a programmatic context. So, for instance, let's start with onSubmit. And so we already have without having to send it back, we actually have access to the value of the entire form, right here. So we just say this.form.value, and here it is.

[00:02:15] Now at the same time, we can actually set the value. So this.form.setValue and we can set in an object, so, pretty straight forward. What we can also do is we can get a single element out of the FormGroup. So in this case, this is kind of an interesting thing, is we have a getter, we're calling it first, and from here we're just returning this.form.get first.

[00:02:50] So you can see here that, first over here is the key in which we're using to return that form element. But, because we have first, or do I do this?
>> Lukas Ruebbelke: Let's see here, I don't think this got wired up in my slides.
>> Lukas Ruebbelke: Yeah, it did not, but what you can do, is in your template, you can now actually go and display first.value, cuz you're exposing the form control via a getter.

[00:03:30] And so, I'll show that maybe when we get into the demonstration what that looks like. So the point is, form group contains FormControls, and we're just wiring it up to the form. And from there, we can start to manipulate and interact with the form in a reactive way from a programmatic context.

>> Lukas Ruebbelke: So, let's expand this a bit, and this is going to be a little bit more to where we are in terms of the login.
>> Lukas Ruebbelke: But we'll do this with FormBuilder. So the only difference is, is that form builder just kind of puts everything together, but the syntax is pretty much the same.

[00:04:08] So we are going to define a FormGroup, in this case, it's subscriber, and we are injecting FormBuilder right here. So this is kind of the start, so previously we defined our FormGroup,
>> Lukas Ruebbelke: Explicitly, so form = new FormGroup, in this case, we are going to use FormBuilder to do this and so you'll see, it's very close.

>> Lukas Ruebbelke: And from here, we're just saying this.subscriber = this.fb for and you're passing in essentially the same exact thing, name. We'll give it an initial value of nothing, empty strings, and we want to make each of these fields required. And so, in our JavaScript we're saying this is how we want this thing to work.

[00:05:07] And then what you do, is you go in and you just have to wide up. So we're gonna start with FormGroup, so using the FormGroup directive we attach it to subscriber. And then to attach the FormControl,
>> Lukas Ruebbelke: Well, here we are, right over here, formControlName.
>> Lukas Ruebbelke: Yes.
>> Speaker 2: The FormGroup looks like a property on a form, whereas a formControlName is like an attribute, which is not bound?

[00:05:44] I mean, it's not following any syntax, I mean, shouldn't it be a property or should it be, what is it? I mean it's not a standard.
>> Lukas Ruebbelke: So, how this works, and this is one of the things we're gonna file under you either know it, or you kind of don't.

[00:06:02] It's just something that's related with this kind of like, you just have to it this way. You can see in this case name and email, that when this get generated, it becomes essentially the key. So if you're doing template driven forms, you actually have to have a name property on there, it's how it's just matching it up.

[00:06:24] And so, by binding this top level FormGroup, it goes through and it matches, the actual key,
>> Lukas Ruebbelke: To the foformControlName. But essentially what it's doing, it's matching in a way, like the name attribute to it. But, the reason why you are not having to bind this,
>> Lukas Ruebbelke: Is because the whole entire thing, is already bound to this.

>> Speaker 2: Then why don't we just write name = name instead of formControlName because formControlName is not even a standard input attribute for input?
>> Lukas Ruebbelke: I mean so that is a question I'd probably have to service to the team. I mean, obviously they have some reasons for that.
>> Speaker 2: Yeah, sure.

>> Lukas Ruebbelke: But I think, if I were to make a guess that when we look at this,
>> Lukas Ruebbelke: Does anybody, like if you didn't know anything about anything. So if we just took this slide and we walked downstairs on the street, and we said, what do you think this is?

[00:07:31] It's like well, it's probably the name of some FormControl. And I'd say bingo, that's it. So if anything, I think they did this because it's self-documenting. It's saying like this is, like we are attaching a FormControl to this. And so, I mean there is always a balance of like, do we do something conventional or do we do something that self-documenting?

[00:07:53] I think formControlName, by using that name convention, it's a little bit more intuitive of what's actually happening in the form. But, I mean that's a valid question. I think even one of the hardship of programming is what do you name things? Managing state or cash I believe in naming things.

[00:08:11] So there's something that's called along those lines.
>> Lukas Ruebbelke: So, formGroup, formControlName.
>> Lukas Ruebbelke: And now, we back this up little quick. So,
>> Lukas Ruebbelke: When we want to actually do something with this or submit it, how does that work? So we know that with FormGroup, we have value invalid. Now, so we can call subscribe, we can pass in the subscriber, so you could reference it from within the subscribe method.

[00:08:58] But,
>> Lukas Ruebbelke: What we're doing here is a little bit of trickery with TypeScript, is we're destructuring the parameter. We're saying, take this object and create a two new properties,
>> Lukas Ruebbelke: A value, and valid, and put them in here. So what we're doing is we're taking this object and we're breaking it out into two essentially parameters, value and valid.

[00:09:27] And is pulling them up off of the subscriber object.
>> Lukas Ruebbelke: I won't get too much in the weeds on this, because I very easy could have just said subscriber, passed it in, and then just pulled it off of that. This is just a really convenient way using TypeScript, to say take this object and pull off just the parameters I want.

[00:09:48] And from here, we're just logging it out. So we're just saying, value, or valid. So we can do whatever we want if we were to extend this, but the next thing is like, well, how do you reset the form, like what do you do? Well, this .subscriber.reset, then you just set the properties you want.

[00:10:08] So now we're able to control this programmatically instead of from the template. So, we could do subscriber.value, subscriber.valid and get those. As well as we can call dot reset and different things on the FormGroup. One thing I wanna point out here is that, and I'll even do this, this may explode but we'll see.

[00:10:40] Occasionally, I try to get brave and I try to actually augment the code in my slides and it never goes well like, Keynote is a horrible ID
>> Lukas Ruebbelke: Don't judge me. No.
>> Lukas Ruebbelke: And this is just gonna bother me too. All right, I think I did.
>> Lukas Ruebbelke: What you could do is not pass this in, and we have,

>> Lukas Ruebbelke: And we could do this. I mean cuz it's in the class, it's there, but based on our conversation earlier, what is the problem with this method?
>> Speaker 2: State-
>> Lukas Ruebbelke: There's hidden state.
>> Speaker 2: Hidden state, yeah.
>> Lukas Ruebbelke: So, we could call this 1,000 times and never know what's gonna happen without knowing the state of the value and the validity of the FormGroup.

[00:11:53] So there are gonna be cases where you're going to have to reference internal properties and methods. But, just like you have container components, presentational components, is try to isolate as much as possible your methods so they are pure. Meaning there are no side effects. And so in this case, when this gets called whatever we're doing it's actually doing something that effect outside of the thing.

[00:12:25] In this case if we put it back, I know that if I call this 1,000 times and I pass in the same object 1,000 times, I'm going to get the same result every single time. So this is called referential transparency. And so we know now that if I pass this in because there's no hidden state, it's a pure method, I'm always going to get the same result.

>> Lukas Ruebbelke: And so this is one of the ways you reduce complexity is by reducing state. And so, as much as possible, I tried to do these pure functions that there's no side effects, no hidden state. Everything that I need gets passed in via perimeter. Which means, I can now also pick this up and move it into utility class which is I've done this before, where I write a bunch of small functions and I'm like, I knew this somewhere else.

[00:13:24] I just pick it up and move it. And because I'm not referencing anything else outside of those methods, it doesn't matter. I just keep passing what I need in, and getting what I need out. So this is, again, reducing state,
>> Lukas Ruebbelke: In code really, reduces complexity.