Handling Form Submission

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.