验证后如何添加登录成功弹窗？

Question

我想添加登录成功弹窗。但是当我添加它时，弹出窗口出现在验证之前，因为它是在提交按钮上单击的。当在验证和用户验证后单击提交按钮时，只应出现弹出窗口。现在对于有效用户和无效用户都显示“登录成功”消息。

<div class="d-lg-flex half">
    <div class="bg order-1 order-md-2 img-fluid" style="background-image: url('../assets/images/banner.png');"
        alt="Responsive image"></div>
    <div class="contents order-2 order-md-1">

        <div class="container">

            <div class="row align-items-center justify-content-center" style="min-height: 0px;">
                <div class="text-center mb-2"><img src="../assets/images/logo.png" class="img-fluid logoimg login_style"
                        alt="Responsive image"></div>

                <div class="col-md-7">
                    <div class="card">
                        <h3 class="text-primary" style="text-align: center;font-family: auto;">HRMS</h3>

                        <form #form="ngForm" (ngSubmit)="form.valid&&onsubmit()" class="form col-md-12">
                            <div class="form-group">
                                <label for="username">Username</label>
                                <input type="email" class="form-control" name="email" id="email" #email="ngModel"
                                    [(ngModel)]="data.email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required>
                                <label class="text-danger" *ngIf="form.submitted&&email.errors?.['required']">Email is
                                    required</label>
                                <label class="text-danger" *ngIf="form.submitted&&email.errors?.['pattern']">Invalid
                                    email</label>
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input type="password" class="form-control" name="password" id="password"
                                    #password="ngModel" [(ngModel)]="data.password"
                                    pattern="(?=.*\d)(?=.*[a-z]).{6,}" required>
                                <label class="text-danger"
                                    *ngIf="form.submitted&&password.errors?.['required']">Password is
                                    required</label>
                                <label class="text-danger" *ngIf="form.submitted&&password.errors?.['pattern']">Minimum
                                    6 characters, one number, uppercase and lowercase letter.</label>

                            </div>
                            <div class="d-flex mb-3 align-items-center">
                                <span class="ml-auto"><a href="/forgotpassword" class="forgot-pass">Forgot
                                        Password</a></span>
                            </div>
                            <button type="submit" class="btn btn-outline-primary mb-2 me-2" (click)="openVerticallyCentered(content)" >
                                Login
                            </button>
                        </form>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

<ng-template #content let-modal>
    <div class="modal-header">
        <h4 class="modal-title">Welcome!</h4>
        <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
    </div>
    <div class="modal-body" *ngIf="!isLoggedIn">
        <p>Login successfull!&hellip;</p>
    </div>
    <div class="modal-body" *ngIf="isLoggedIn" >
        <p>Invalid user!&hellip;</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-light" (click)="modal.close('Close click')">OK</button>
    </div>
</ng-template>[enter image description here](https://i.stack.imgur.com/C83vs.png)

import { Component, OnInit } from '@angular/core';
import { ApiCallService } from '../api-call.service';
import { Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  data = {
    email: '', password: ''
  }
  public isLoggedIn=false; 
  

  constructor(private route: Router, private apicall: ApiCallService, private modalService: NgbModal) { 
   
  }
  ngOnInit(): void {
  }

  openVerticallyCentered(content: any) {
    this.modalService.open(content, { centered: true }); 
  }

  onsubmit() {
   
    this.apicall.Login(this.data).subscribe((res)=>{
    // alert(JSON.stringify(res));
    if(res.msg=='1'){
      this.isLoggedIn=true;
      this.route.navigate(['employeedashboard']);
    }else if(res.msg=='2'){
      this.isLoggedIn=false;
      alert("mismatch");
    }else if(res.msg=='3'){
      this.isLoggedIn=false;
      alert("invalid user");
    }else{
      this.isLoggedIn=false;
      alert("invalid user");
    }
    // this.reload();
    })

    // alert(JSON.stringify(this.data));
    // this.openVerticallyCentered(this.data);
  }
  reload() {
    location.reload();
  }
  
}

Answer 1

您的

openVerticallyCentered

方法应该在处理成功登录的订阅块内调用。目前，它要么通过点击提交按钮（绝对不是一个好主意），要么在订阅块验证之后（你在其中注释掉 atm）调用，无论条件如何都会触发。因此，将它移动到

if(res.msg=='1'){

条件内 - 如果这是处理成功登录的块。