Reacting form is reloading the page on submit

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.0-rc.9 (/home/javebratt/.npm-global/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-alpha.13
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0-rc.11
   @ionic/schematics-angular  : 1.0.0-rc.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none

System:

   NodeJS : v10.7.0 (/usr/bin/node)
   npm    : 6.2.0
   OS     : Linux 4.17

Describe the Bug I’m creating a reactive form, assigning: <form [formGroup]="loginForm" (ngSubmit)="loginUser(loginForm)"> but when I click on the <ion-button type="submit" expand="block"> the form doesn’t call the function loginForm(), instead it just reloads the page.

Steps to Reproduce It happened on an app I was updating, but I created a blank project to test this and it still happens, so steps to reproduce the behavior would be:

1. Create a new blank app.
2. Create a form in home.page.html using [formGroup] and (ngSubmit) properties.
3. Add a button to the form: <ion-button type="submit">
4. Initialize the form in the home.page.ts file
5. Import and add ReactiveFormsModule to home.module.ts
6. Run the app using ionic serve, click the submit button and see the page reload.

Related Code The HTML file:

<ion-content padding>
  <form [formGroup]="loginForm" (ngSubmit)="loginUser(loginForm)">
    <ion-item>
      <ion-label stacked>Email</ion-label>
      <ion-input formControlName="email" type="email" placeholder="Your email address">
      </ion-input>
    </ion-item>

    <ion-item>
      <ion-label stacked>Password</ion-label>
      <ion-input formControlName="password" type="password" placeholder="Your password">
      </ion-input>
    </ion-item>

    <ion-button type="submit" expand="block">
      Log In
    </ion-button>
  </form>
</ion-content>

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-page-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  public loginForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.loginForm = this.formBuilder.group({
      email: ['', Validators.compose([Validators.required, Validators.email])],
      password: [
        '',
        Validators.compose([Validators.required, Validators.minLength(6)]),
      ],
    });
  }

  loginUser(loginForm): void {
    console.log(loginForm);
  }
}

Expected Behavior When the button is clicked it should call the function and not reload the page.

Additional Context I’ve tried this using both (ngSubmit) and (submit) getting the same behavior in both.

[javebratt]

I just tested beta.1 and it’s working as expected, gonna close this 😃

[johneast]

I’m having the same issue. I can get around it by either changing

<ion-button type="submit">Submit</ion-button>

to

<button type="submit">Submit</button>

of course I lose all the styling. I can also get around it by changing the type of the ion-button from submit to a normal button.