Angular MatDialog closes instantly-CodePudding

I am trying to use angular material to pop up a dialog with another component. However, clicking on the button that is meant to open the dialog, only opens it for a split second only to close it almost instantly afterwards and refreshes the page.

this is my Login Component :

<div >
     <div >
        <div >
           <form>
              <div >
                 <label>Pseudo</label>
                 <input type="text"  placeholder="">
              </div>
              <div >
                 <label>Mot de passe</label>
                 <input type="password"  placeholder="">
              </div>
              <button (click)="toDashboard()" type="submit" >Se connecter</button>
              &nbsp;
              <button (click)="toAccountCreation()" type="submit" >Créer un compte</button>
              &nbsp;
              <button (click)="ToPwdReset()" >Mot de passe oublié?</button>
           </form>
        </div>
     </div>
  </div>

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { ResetPwdComponent } from '../reset-pwd/reset-pwd.component';
@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

 constructor(private route:Router,private dialog : MatDialog){}

  ngOnInit(): void {
 }

 toDashboard(){
     this.route.navigate(['./homepage']);
 }

 toAccountCreation(){
   this.route.navigate(['./AccountCreation']);
}

 ToPwdReset(){
     this.dialog.open(ResetPwdComponent,{width:'100%'});
 }

}

this last ToPwdReset() function is supposed to open up my dialog of the "ResetPwdComponent" but it does so and immediately closes it while refreshing the page.

I have looked into answers on other posts but none of them fixed my issue.

thanks in advance.

CodePudding user response：

Javascript will assume a button inside a form is a submit button so it refreshes the page because of that.

Your have to set type="button" in the button to make the password reset to solve the problem