Handling Form Submission
In this lesson, we'll look at how to handle form submission with a template form.
The last thing we’ll do is handle the form submission. It’s not all that different from reactive forms. We’ll disable the submit button if the form is invalid. On the <button>
element, we’ll bind the disabled
attribute to the emailFormGroup.invalid
property.
<button class="btn btn-primary" type="submit" [disabled]="emailFormGroup.invalid">
Submit
</button>
Next, we’ll listen for the submit
event on the <form>
element with the ngSubmit
directive.
<form class="card-body" #emailFormGroup="ngForm" (ngSubmit)="handleSubmit()">
Reminder: the ngSubmit
directive will stop the default behavior of refreshing the page and will invoke the function in the expression. The name of the function we’re running is called handleSubmit
. It doesn’t exist at the moment. Let’s define it in the app.component.ts
file.
Get hands-on with 1200+ tech skills courses.