Angular MatDialog 立即关闭

Question

我正在尝试使用 angular material 弹出与另一个组件的对话框。但是，单击用于打开对话框的按钮，只会打开它一瞬间，然后几乎立即关闭它并刷新页面。

这是我的登录组件：

<div class="main">
     <div class="col-md-6 col-sm-12">
        <div class="login-form">
           <form>
              <div class="form-group">
                 <label>Pseudo</label>
                 <input type="text" class="form-control" placeholder="">
              </div>
              <div class="form-group">
                 <label>Mot de passe</label>
                 <input type="password" class="form-control" placeholder="">
              </div>
              <button (click)="toDashboard()" type="submit" class="btn btn-black">Se connecter</button>
              &nbsp;
              <button (click)="toAccountCreation()" type="submit" class="btn btn-secondary">Créer un compte</button>
              &nbsp;
              <button (click)="ToPwdReset()" class="btn pwdresetcolor">Mot de passe oublié?</button>
           </form>
        </div>
     </div>
  </div>

Login.component.ts

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%'});
 }

}

最后一个 ToPwdReset() 函数应该打开我的“ResetPwdComponent”对话框，但它确实打开了，并在刷新页面时立即关闭了它。

我查看了其他帖子的答案，但 none 解决了我的问题。

提前致谢。

Answer 1

Javascript 将假定表单内的按钮是提交按钮，因此它会因此刷新页面。

您必须在按钮中设置type="button"使密码重置才能解决问题

Angular MatDialog 立即关闭

Angular MatDialog closes instantly

html

angular

typescript

angular-material

frontend