This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Challenge 9 Solution Part 2" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Lukas completes his walk through of the challenge 9 solution by adding a submit event to the form and emitting the results to the parent component.

Get Unlimited Access Now

Transcript from the "Challenge 9 Solution Part 2" Lesson

>> [MUSIC]

>> Lukas Ruebbelke: So let's see what happens if we'll go back in here and we're just going to freestyle for just a moment.
>> Lukas Ruebbelke: I'm gonna take this off, actually, you know what, I'll leave it on there, it's not gonna hurt anything. And then from here, let's go submit, you know what?

[00:00:31] Let's just do the same thing here.
>> Lukas Ruebbelke: Refresh the page. I got a good feeling about this. Let's go here. Let's set this for a lot of money. I need to sell a few of these so I can buy some blue suede shoes. And uh-oh, nothing happened. Let's see what's going on here.

>> Lukas Ruebbelke: ngform, submit, submit, submit, submit. See if maybe I got my syntax wrong here.
>> Lukas Ruebbelke: Let's pull in a local method real quick.
>> Speaker 2: I think instead of submit that there's a NG in front of it, NG submit on the form.
>> Lukas Ruebbelke: Like this?
>> Speaker 2: Yeah.
>> Lukas Ruebbelke: That does not seem to be working, my friends.

>> Speaker 3: I just tried
>> Lukas Ruebbelke: It did work for you?
>> Speaker 3: Yeah.
>> Lukas Ruebbelke: Are you on like Beta 10? Hasn't been released yet.
>> Speaker 5: I have a film belt to buy.
>> Lukas Ruebbelke: So, I'm channelling Scott Moss here, I'm not gonna freak out. Let's see what's going on here real quick.

>> Speaker 6: The integrity of the handler Yeah.
>> Lukas Ruebbelke: I wonder if that's overwriting it.
>> Lukas Ruebbelke: What I'm gonna do just for a test.
>> Lukas Ruebbelke: Let me see if
>> Lukas Ruebbelke: Have I forgot. You know what? That'll bite you every single time.
>> Lukas Ruebbelke: From now on if I forget this and somebody corrects me before I crash and burn, you get a dollar.

[00:03:41] All right, so now I really have a good feeling about this, I feel like redemption is right around the corner. [SOUND]
>> Lukas Ruebbelke: Where was I? Yes. No.
>> Lukas Ruebbelke: I'm saving this for later, just kidding. [LAUGH] All right, now I'm just getting stubborn. [NOISE] That was Mark's mom calling to figure out what's taking me so long.

>> Lukas Ruebbelke: The customer calling saying, what's up with this demo?
>> Speaker 7: The docs say you have to import core directives. Is that the case?
>> Lukas Ruebbelke: Core directives? Let's see something here just real quick. Test. Let's see if this is working at all. If not I will. When all else fails, let's just check the docs real quick.

>> Lukas Ruebbelke: [SOUND]
>> Lukas Ruebbelke: I mean, is this not what I'm doing? Just to cover our basis, Scott, I'm stalling for time, okay.
>> Lukas Ruebbelke: Now the question is, is this in CORE DIRECTIVES, it seems like it would be in form directives.
>> Lukas Ruebbelke: If I can make a suggestion for the docs, the one thing that would be nice if they'd actually show the imports, cuz now, I don't know where core directives is.

>> Speaker 8: Wouldn't core directives automatically import?
>> Lukas Ruebbelke: Okay, so then the question is why is that in the docs then?
>> Speaker 9: I didn't hear.
>> Lukas Ruebbelke: Well.
>> Speaker 9: I have form directory.
>> Lukas Ruebbelke: I just don't know how to do this any more simpler than this.
>> Speaker 10: Your submit button might be outside of your form, [INAUDIBLE]

>> Lukas Ruebbelke: You know what? That actually may be it. Okay, you are on the verge of winning a dollar bounty. If this works, I'm totally going like Cuban Goodwin, Jr. when he won the Oscar or whatever when he's just running around the stage. Scott, prepare yourself.
>> Lukas Ruebbelke: Boom! Okay so, my pain is your pleasure.

[00:07:38] I'm gonna save you a lot of time in the future. The reason why this was not working is because I did not have a submit button in my form. So it was down here because I was using material design. It was down here in kind of the footer and then I had my form up top.

[00:08:02] So, what we have here is a failure to communicate. So moral of the story is, if you're going to use ng submit, make sure you have a submit button in your form. Air five, air five, air five, air five.
>> Lukas Ruebbelke: I'm so glad I'm hanging out with 200 of my best friends right now.

>> Speaker 11: [LAUGH]
>> Lukas Ruebbelke: If I had any feelings at all, I would be embarrassed.
>> Lukas Ruebbelke: Yeah, you remote, folks, I thought you had my back. All right, so I'm just going to try this one more time. Okay, so that's good. We go back up here.
>> Lukas Ruebbelke: And I'm going to

>> Lukas Ruebbelke: I'm gonna call this
>> Lukas Ruebbelke: saved.
>> Lukas Ruebbelke: Omit and we're going to go with selected widget. All right, let's see if we're back from the brink.
>> Lukas Ruebbelke: There we go. So you can see it in the console down here. We've now surfaced this to the top. One other thing that I'm working on, as soon as I get it working, I will post this as well.

[00:10:09] I have a half-formed form builder in here, that there's a disconnect, it's trying to look for name and price on selected widget. It doesn't exist yet. I think this is constructor verse entity on init, so that'll be the next thing that I try, but with that said, are there any questions about forms in Angular?

[00:10:37] Remember, submit button goes in the form or ng submit does not work.