Page reloads on form submission (Angular v15, Ionic v7)

[briantuju]

Hello guys. Kindly assist me here. I’m trying to submit a form (template-driven form) but it is reloading the page on submit. How can I get it to work correctly?
Below is my code:

tab2.page.ts component code

// tab2.page.ts
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { EmailComposer } from '@awesome-cordova-plugins/email-composer/ngx';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule],
  providers: [EmailComposer],
})
export class Tab2Page {
  email = {
    to: '',
    subject: '',
    body: '',
  };

  constructor(private emailComposer: EmailComposer) {}

  ngOnInit() {
    console.log(this.emailComposer);
  }

  sendEmail() {
    console.log(this.email);
  }
}

tab2.page.html template

// tab2.page.html
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Email Composer </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <form (ngSubmit)="sendEmail()">
    <ion-item>
      <ion-label position="floating">To (recipient)</ion-label>
      <ion-input type="email" [value]="email.to" name="to" required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">Email Body (Message)</ion-label>
      <ion-textarea [value]="email.body" name="body" required></ion-textarea>
    </ion-item>

    <ion-button type="submit">Send</ion-button>
  </form>
</ion-content>

Additional context : I have attached the main.ts file and app.component.ts .