Ionic-framework: Reacting form is reloading the page on submit

[javebratt]

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]

Also, while doing some more testing, noted that when it reloads the page it is sending the form's input through the URL, so I'm getting a console message saying:

Navigated to http://localhost:8100/home?ion-input-0=jorge&ion-input-1=77777788855

[paulstelzer]

Can confirm this issue which is also a bug in beta.0.

[declanelcocks]

Can confirm this is also happening for me. The only option for me is to remove the ngSubmit and remove type="submit" on the button in order to manually submit the form myself. Of course, this is not a UX.

[didinj]

This happening too with beta version.

ionic (Ionic CLI) : 4.0.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.0
@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
@ionic/schematics-angular : 1.0.0

[Nightbr]

duplicate https://github.com/ionic-team/ionic/issues/14890, https://github.com/ionic-team/ionic/issues/14786

[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.

[javebratt]

I just tested beta.1 and it's working as expected, gonna close this :-)

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.