Check out a free preview of the full Angular 13 Fundamentals course:
The "Form Solution" Lesson is part of the full, Angular 13 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas walks through the solution to the form exercise.

Get Unlimited Access Now

Transcript from the "Form Solution" Lesson

>> Let's do the solutions. So git checkout -b 02-template-forms-solution. So now we are on the solutions branch, back into the code and so what we're going to do is we're going to fill this form out. And we're also going to find a way to edit the course without affecting the other representations.

[00:00:33] So we have two additional controls that we need to add. And if you went and looked at the main branch for reference, I'm not going to fault you. The one thing that is the thing that when you're dealing with text-based controls, that everything can kind of sit within a mat-form-field.

[00:01:05] And so you have a mat-form-field, and you're able to put your test control into that, and you get a lot of nice things around the text-based control. So for instance, I'm pretty sure that I can actually change this into a textarea and let me just see, hopefully this doesn't blow up.

[00:01:28] Yeah, so you can see here whereas this is an input, this is now a textarea. Looks pretty similar, the difference being that I have a draggable thing here, you can see I'm running Grammarly. So it was trying to do some grammar checking as we go along. So, but because we are going to use, coming back to here, we're gonna use a checkbox and we're going to use a slider, this mat-form-field is not going to work.

[00:02:07] And so what we have to do here is just use a section and we're gonna give this a full-width, like so and then what I'm going to do is I'm going to add in the mat-slider. And we're going to add in our property, so again back to full-width.

[00:02:38] And we're gonna go min=0, max=100 cuz I don't think you can be at 110% unless I suppose this would be, I have the tiger mode, so thumblabel. So this, what I'm adding here, a lot of this is just a matter of me going through the documentation and finding what works for me.

[00:03:11] So there is nothing particularly, I think compelling about some of these options that I'm putting on here, is just trial and error and finding out what I think looks the best. So in this case, we're doing ngModel current or rather selectedCourse.percentComplete. And then let's also do name=percentComplete, all right, let's check this out.

[00:03:58] Yeah. I think these are probably the same value. So let's just change this up, so we can get our money's worth. We'll go 12% on this one and we'll go 98% on this one and so now you can see that and then when I cancel, there we go.

[00:04:26] So again notice that as I select this that the underlying value of the form is being updated as well as the, I totally don't know why I did that, as the validity or state of the form. Is it in a valid state? All right, so from here, let's go back and let's add in one more control here.

[00:05:05] And what I can do here, we'll go section again. And inside of this, we're going to do mat-checkbox and we will, Bind to this using ngModel, surprise. And this is gonna be selectedCourse. Favorite. And we going to add name=favorite. And what I'm also going to do is, Let's actually update this to 4.

[00:06:06] We're going to go with, selectedCourse.percentComplete. Let's go ahead and save this. All right, so now you can see here, that if I drag this, There we go, cancel, select, cancel, there we go, all right, so, Let's do or let me add in one more thing real quick that we kind of briefly in a roundabout way, we've kind of covered some of the concepts here.

[00:07:08] But let's talk about how to submit this particular form and so we are going to go ahead and we're going to add in a button. And this is going to be type=submit. And we're going to mat-button and in this case, we're gonna go color=primary, and we'll go Save.

[00:07:44] And now what we can do here, because this is a submit button, that we can go up to the top on the form itself and we can attach a submit event handler. And so here we'll go saveCourse and we'll go (selectedCourse), okay? So we're calling submit=saveCourse(selectedCourse) and then we're going to go here and saveCourse.

[00:08:36] And we're just going to log this out. Okay, now let's go back into our code here. I'm gonna select this and just bump up here. And now if I go and I hit Enter, Not within, there we go. So within a textarea, it's going to just break to the next line.

[00:09:09] But as you can see here, that when I hit Enter within this text field, then that captures that as a submit event. So you have to have a submit button in the form to do that, but once I added that, I can also call save as well. So we cancel this and you'll notice here that this is in a invalid state.

[00:09:41] And so what we can do here is we build this out and go back into here, into our template here. And what I can do is I can simply go disabled, so I can bind to this disabled property and I can just say form.invalid All right, so if it's invalid, I'm not gonna be able to do anything on this.

[00:10:14] So you'll see here that I'm not able to click it, so here it's valid and I can save. When it's not valid, so if I went here then obviously once I've satisfied the title requirements on the object, on the data model, it's true. And then when I cancel it out, it is no longer true.

[00:10:46] So let's talk about real quick how do or how could we prevent this from happening. That when I select one of these elements, because we are passing this by reference that all of these are pointing to the same object. How do we handle this? So again, if you have shared mutable state and in a vacuum, if shared state is okay, immutable state is okay.

[00:11:32] The trick here is you either have to make it not shared or not mutable. In this case, we have a form, so by nature that is mutable. But how we can solve this is when we go to selectCourse, we can, Let's just see what happens if we do this.

[00:11:55] So we're just going to take this and essentially create a copy of it. I hope this works. So notice that it's working over here because we're still binding to the same object, but it's not over here. So this is really important that when you have something that involves a form, it is mutative by nature like inputting data into a form, you are mutating some underlying data model.

[00:12:33] And so the trick here is that you have to make sure that though it's mutable, it's not shared mutable. One little trick that I like to do when I'm dealing with this is, I like to, When I set, A course and I'm going to break that shared mutation, Connection, what I can do is I'd like to just, Well, what I can do here is I can just go course.title, like so and because this is a string, I'm just going to store it.

[00:13:29] Save it off and then here, We will go, Original, I can spell this correctly, originalTitle, save this. And now I'm able to change this, but I'm still able to track the title because it's just a string. It's a primitive data type, so that is passed by value and not pass by reference.