Angular 9 Fundamentals Angular 9 Fundamentals

Submitting Forms & Valid States

Topics:

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

Check out a free preview of the full Angular 9 Fundamentals course:
The "Submitting Forms & Valid States" Lesson is part of the full, Angular 9 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas adds a submit button to the form, and demonstrates how to display a button that is active or disabled depending on the state associated with the button.

Get Unlimited Access Now

Transcript from the "Submitting Forms & Valid States" Lesson

[00:00:00]
>> All right, so to kind of wrap up this particular module, there's one other thing that I want to cover. And that is the submit button. And so, we're going to go type submit. And I'm gonna take off, The click handler, and the reason being is because, there is a submit DOM event that we can bind to.

[00:00:42] So, I have no idea what that is. Wait a second, just picked it up, color, we're gonna set this to primary. And we'll go up to the form element itself. And we're going to bind to submit and when we do this, we're going to essentially call saveCourse. And, Because this method doesn't exist, I'll go here and I'll add this in, saveCourse.

[00:01:31] And I'm just going to console log this, SaveCourse, Okay? I'm going to pull up the console, we'll go here. Submit, saveCourse. What I can also do is if you put it here, you can hit Enter. So it will also, this is kind of a nice touch. If you just want hit Enter to submit, it will capture that as well.

[00:02:10] Now, one last piece before we kind of wrap this up is, you'll notice here that we're tracking, is this form in a valid state? Well, if it's not in a valid state, what we need to do is probably not allow the user to submit the form. And so what we can do here is we can essentially just bind to the disabled attribute and we will just say, the form is invalid, don't allow it to submit.

[00:02:51] So we'll go here, back into our app. And notice, now submit is disabled because the form value is false. The minute, it's satisfied, I can then submit or if I cancel and I start to type in, now it becomes valid again. So what? In summary, when we create in template driven forms, and kind of a simple condensed version, is when you add just a form.

[00:03:34] When Angular sees this form element Is that it's going to do some things under the hood for free for you. And one of them is to create a form controller that keeps track of not only the value of your entire form, but is it in a valid state.

[00:03:54] And so you can, using ngForm, assign that to a local template reference, which you can then use to say, if it's not valid, don't submit it. You can also attach the Submit event handler directly to the form element so that when you hit Enter, that then will call, but of course, in your component class that you would like.

[00:04:20] The other piece is, in this case, we're using Angular Material is we have matInput, camel case, but ngModel itself is where we can then bind to the individual properties of the selected course. So that is, I believe, nicely encapsulates what, when we talk about template driven forms, kind of the main pieces so that when you have a form, you have a form controller.

[00:04:52] And that manages not only the state of the form, but the correctness or the validity of the form. And you can then track that using ngForm, and then essentially attached to your basic event handler. So we're going to do a small challenge where we're just going to add a few more form elements to this and then we'll move on from there.