Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Challenge 14: Solutions" 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 walks through the solution for Challenge 14.

Get Unlimited Access Now

Transcript from the "Challenge 14: Solutions" Lesson

[00:00:00]
>> Lukas Ruebbelke: I'm trying to do this by memory. We'll import, so we'll start with the stuff that I know. We're definitely gonna need this. And let's go with login = new FormGroup. Now if I do something crazy, just call me out. As in, I'm missing a parentheses? Ha, or not, what's going on here?

[00:00:40]
>> Lukas Ruebbelke: Uh-huh, actually, hold on, hold on, hold on, hold on. I don't think I instantiated here. Help me out, class. I think I just-
>> off screen male: Say FormGroup.
>> Lukas Ruebbelke: There we go, all right? And then from here, let's go login = this.fb.group.
>> Lukas Ruebbelke: Let's go username.
>> Lukas Ruebbelke: We'll just give it an empty value.

[00:01:28] And Validators.required.
>> Lukas Ruebbelke: I wonder why it does not like this.
>> off screen female: Do you need this?
>> off screen male: Is your interface the same as your FormGroup?
>> Lukas Ruebbelke: For one. Now what did I do here? Is it like a-
>> off screen female: You don't need a parenthesis after the required.
>> off screen male: [INAUDIBLE]
>> Lukas Ruebbelke: No, there we go.

[00:02:04] That's the other thing, is this a property or is this a method? We'll go password,
>> Lukas Ruebbelke: Okay?
>> Lukas Ruebbelke: And since we're here, let's just go submit. And we'll go value is Login and Valid, so this is going to be just like a boolean.
>> Lukas Ruebbelke: And,
>> Lukas Ruebbelke: Help me out here.

[00:02:47]
>> Lukas Ruebbelke: Maybe that's right. Let me double check.
>> off screen male: It was value valid and then on the second one there was an assignment. Yeah.
>> off screen female: Where is your interface?
>> off screen male: The first thing was just value, valid, and then you're assigning it. Basically, you're taking the properties and then assigning it.

[00:03:04]
>> Lukas Ruebbelke: So, so far so good?
>> off screen male: Yeah.
>> Lukas Ruebbelke: Yeah, and then here is value.
>> off screen male: Login.
>> Lukas Ruebbelke: [INAUDIBLE] Yeah, your interface.
>> off screen male: Login interface.
>> Lukas Ruebbelke: All right, there we go. Am I missing something?
>> off screen male: Do you need to assign valid to a boolean?
>> Lukas Ruebbelke: Now, so TSLint, if you're just doing simple, like it's a string or a primative, you don't need to actually type it.

[00:03:38]
>> off screen male: Okay.
>> Lukas Ruebbelke: I'm trying to avoid doing this without actually looking at how I did it in the other one.
>> off screen male: No, this is good. I think they're just line errors.
>> Lukas Ruebbelke: Yeah, so we'll go c log and let's just check value and we'll go VALID.
>> Lukas Ruebbelke: Let's take out white spaces.

[00:04:09] I would just live in fear of this for the rest of my life. It would be so easy to just turn it off in TSLint, but there's probably a super good reason. It's just gonna be funny cuz we take out our appendix, we don't need that anymore. In 30 years, we're like, actually our soul [LAUGH] is in our appendix and sorry, guys.

[00:04:36]
>> Lukas Ruebbelke: And so we'll go reset since we're here. And this.login.reset.
>> Lukas Ruebbelke: And username, password.
>> Lukas Ruebbelke: Don't even say it, I know, okay?
>> Lukas Ruebbelke: Since I'm here, we'll just,
>> Lukas Ruebbelke: What?
>> off screen male: Just tab the setting of the WebStorm, not introduce spaces at the beginning.
>> Lukas Ruebbelke: So it's actually, that sounds like almost too good of an idea.

[00:05:23] That would actually make my life better. I will tackle that at lunch.
>> Lukas Ruebbelke: Okay, so here, we need to hook up the FormGroup. So see if they actually, ng.
>> Lukas Ruebbelke: Is it ngGroup? What is?
>> off screen male: It's just one group.
>> Lukas Ruebbelke: Right. You know what? That's what you get for doing angular JS for like ever.

[00:06:02] Cuz every once in awhile, I just wanna sort of put NG on all the things.
>> Lukas Ruebbelke: Login and formControlName, this is gonna be username. And down here, formControlName = password. And then what we'll also do is submit and then we'll pass in login.
>> Lukas Ruebbelke: Let's see.
>> off screen male: Cancel.

[00:06:56]
>> Lukas Ruebbelke: All right.
>> Lukas Ruebbelke: Did I call it reset? I think I did.
>> Lukas Ruebbelke: All right, so we're doing a big pair programming session here. I'll walk through this, see if I miss anything. formGroup gets into the login formGroup. We're calling submit, we're just passing that login formGroup back in for processing.

[00:07:25] formControlName, username, formControlName, password, and on click, we're calling reset. And so if we look into our component, we have FormGroup, FormBuilder group. And then submit is taking, so we're basically destructuring the FormGroup and pulling value and valid off of it and calling reset, so hopefully this works. I'm just kind of saying a little prayer in my heart because I really wanna go eat lunch.

[00:08:12]
>> Lukas Ruebbelke: Username simpleton, password is top secret password.
>> Lukas Ruebbelke: [LAUGH] That's funny. So down here on the bottom,
>> Lukas Ruebbelke: And it is valid, and it also reset.