[Ionic v4] Reactive form reloads the page on submitting

[rathodkaran07]

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.13 (C:\Users\##\AppData\Roaming\npm\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

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none

System:

   Android SDK Tools : 25.2.5
   NodeJS            : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm               : 5.6.0
   OS                : Windows 10

Environment:

   ANDROID_HOME : C:\Program Files (x86)\Android\android-sdk

Describe the Bug
Reactive forms not working as expected in ionic v4 beta.
When submitting the form it reloads the page instead, it should just submit the form values.

Steps to Reproduce
Steps to reproduce the behavior:

1. Go to 'https://reactive-form-bug.stackblitz.io/login'
2. Fill form fields / leave empty
3. Click on 'submit'
4. Page reloads

Related Code
StackBlitz.

Expected Behavior
Submitting the form it should just submit the form values.

[gagaXD]

Hello there,

I'm having the same issue.

I may have found something :

If I use

<form class="list-form" [formGroup]="loginForm"  (ngSubmit)="onSubmit(loginForm)">
    ....
    <ion-button type="submit"></ion-button>
</form

The page is reloading when clicking on the button

But, If I use

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

Then, my submit function is called.

Hope this will helps !

Cheers

[rathodkaran07]

Hi,

By using normal button tag I miss the ion-button theme.
Another workaround is to use input type = "button" and attach click listener, this works.

[abalad]

same issue here:

@Component({
  selector: 'page-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage {

  public formLogin: FormGroup = new FormGroup({
    usuario: new FormControl(''),
    senha: new FormControl(''),
  });

  constructor( public events: Events, private loginSandbox: LoginSandbox  ) {
    events.publish('hideHeader', { isHidden: true});
  }

  onSubmit( ) {
    if (this.formLogin.valid) {
        this.loginSandbox.login( this.formLogin.value  );
    }
  }
}

                        <form  [formGroup]="formLogin" (ngSubmit)="onSubmit()"  >
                            <div class="ui-login-form-input">
                                <ion-item>
                                    <ion-label [color]="'primary'" floating><ion-icon [color]="'medium'" name="person"></ion-icon> </ion-label>
                                    <ion-input [autofocus]="true" required type="email" placeholder="Informe seu email"  [formControlName]="usuario"></ion-input>
                                </ion-item>
                            </div>
                            <div class="ui-login-form-input">
                                <ion-item>
                                    <ion-label [color]="'primary'"><ion-icon [color]="'medium'" name="key"></ion-icon> </ion-label>
                                    <ion-input type="password" required placeholder="Informe sua senha"  formControlName="senha"></ion-input>
                                </ion-item>
                            </div>
                            <ion-button button-type="button" type="submit" expand="full" color="primary">ENTRAR</ion-button>
                        </form>

[Nightbr]

Seems to be duplicate/related --> #14786

[rathodkaran07]

Thank you, that was really quick...!
Appreciate your efforts.

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