Angular Core Wiring Up the Form

Transcript from the "Wiring Up the Form" Lesson

[00:00:02]
>> Lukas Ruebbelke: So, making a round-trip for the server, we now are able to pull the data in to Projects. We can select it and we can see it. But how do we update it and send it back to the server? Or
>> Lukas Ruebbelke: The next question is if we actually want to create a new project, how do we do that?

[00:00:27] We're now going to, in the projects component,
>> Lukas Ruebbelke: Let's introduce a form, so it's already in here. So form, and it comes down to here. So we're encapsulating the card content and the buttons here.
>> Lukas Ruebbelke: So the first thing that we can do, because this is a form, is we can hook in a submit.

[00:01:02]
>> Lukas Ruebbelke: Event and we're just going to go saveProject. And we'll go with, is it selectedProject? Yes, here we go.
>> Lukas Ruebbelke: And so when we start to fill this form out, that, because we have a submit button when we hit Enter, it's going to capture that event and call saveProject.

[00:01:28] So,
>> Lukas Ruebbelke: There is a reason why I'm being slightly opaque here. SaveProject, we'll take the project, and we're going to do something in a moment. Saving project.
>> Lukas Ruebbelke: And then we'll just trace the cell. So now in our component here, let's build out the form. Now, for the sake of time I'm just going to really click top into the reference.

[00:02:05] I'm just going to pull one of these elements off, and we'll go back into the code and I talk about what I've just done. So within the form, I'm introducing the mat form field, so this is an Angular material element. And then within this form field, then we have mat input and

[00:02:38]
>> Lukas Ruebbelke: We're binding to the value of the ngModel. So I'm going to take this off for just one moment, and let's let this build.
>> Lukas Ruebbelke: And then let's come over here and check this out. So, when you are using a form element in Angular material, notice that you get some kind of interesting things that are happening within this input.

[00:03:07] And so, this title here when you select, how it animates up, notice that when you click out, you are getting kind of this neat. It's underlined, you're selected, you're out, and
>> Lukas Ruebbelke: So with that, because this is an input that we're gonna say, okay, for this field, I want to bind to selectedProject.title.

[00:03:45]
>> Lukas Ruebbelke: Okay, let's save that.
>> Lukas Ruebbelke: And the reason why this is failing, so let me take this off real quick, save it. Go back to Projects, not a problem, nothing's happening, totally fine. Because, up to this point, we're only using Angular material. But the minute that I put on ngModel, we need to add in the form functionality to this.

[00:04:23] So as you can imagine, as this has been super interesting today, that you need to import the forms module. And so now once I save this, we go back here, save this.
>> Lukas Ruebbelke: Let me make sure I imported this correct.
>> Lukas Ruebbelke: This is why.
>> Lukas Ruebbelke: On the projects module,

[00:05:05]
>> Lukas Ruebbelke: There we go, I'll save this.
>> Lukas Ruebbelke: We select this, there we go, so notice that it's filling it out. Let me just refresh this.
>> Lukas Ruebbelke: That's interesting behavior, but nonetheless, here we go.
>> Lukas Ruebbelke: So I'm curious why, if we go back.
>> Lukas Ruebbelke: So notice, whats happening here, is because this is asynchronous, and we're binding to selectedProject, well guess what?

[00:06:04] SelectedProject doesn't exist yet. So, what I would do here, and there's a few ways to solve this, but I'm going to jump straight to typically how when I'm sharing a form that I'm creating something and updating something. Is that I will keep an empty project, object in this case.

[00:06:50]
>> Lukas Ruebbelke: And we'll just go const emptyProject, and we will cast this to a project so we know that what it is.
>> Lukas Ruebbelke: And from here, we're gonna say, id is null, title is just an empty string,
>> Lukas Ruebbelke: What other properties around here? Just jump in and see here, not to bad.

[00:07:23]
>> Lukas Ruebbelke: So details, we'll just set everything to kind of some defaults here.
>> Lukas Ruebbelke: Then we can do as well this.
>> Lukas Ruebbelke: selectedProject =,
>> Lukas Ruebbelke: Or let's do this. selectProject, so we're only doing it in one place, emptyProject.
>> Lukas Ruebbelke: So any time this page loads, we just reset the project, as well as when we cancel.

[00:08:19]
>> Lukas Ruebbelke: We'll reset as well.
>> Lukas Ruebbelke: There we go.
>> Lukas Ruebbelke: And notice, everything is rendering because this is being initialized to an empty project.