时间戳

首页 > 解决方案 > 如何保持登录失败的引导模式？

angular - 如何保持登录失败的引导模式？

问题描述

这是我的模态

<!-- The Modal -->
<div class="modal" id="myModal" [ngClass]="{'show':showModal}">
    <div class="modal-dialog">
         <div class="modal-content">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Login Failure</h4>
            <button type="button" class="close" data-dismiss="modal" (click)="showModal=false">&times; 
         </button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
        Incorrect Password
          </div>
         <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal" 
        (click)="showModal=false">Close</button>
          </div>

        </div>
    </div>
</div>

这是我的 login.component.ts

login(form: NgForm) {
      console.log('login:login success comp');
      this.Login.login(this.credentials).subscribe(
      (data) => {
      if (data.results[0].role_id === 4) {
          sessionStorage.setItem('user', '4');
          sessionStorage.setItem('fname', data.results[0].first_name);
          sessionStorage.setItem('id',data.results[0].id);
          this.router.navigateByUrl('instruction');
      } 
      console.log('login-cren', this.credentials);
      },
      err => {
      console.error(err);
      // alert('Email does not exist');
      // alert('Password does not match');


      }
      );
}

这是按钮点击*

<button type="submit" (click)="login()" data-toggle="modal" data-target="#myModal" 
    (click)="showModal=false" [disabled]="!loginForm.valid" class="fadeIn fourth btn btn-primary ">Login 
</button>

登录失败时如何显示模式？

标签： angular

解决方案

errorMsg: string;
login(form: NgForm) {
      console.log('login:login success comp');
      this.Login.login(this.credentials).subscribe(
      (data) => {
      if (data.results[0].role_id === 4) {
          sessionStorage.setItem('user', '4');
          sessionStorage.setItem('fname', data.results[0].first_name);
          sessionStorage.setItem('id',data.results[0].id);
          this.router.navigateByUrl('instruction');
      } 
      console.log('login-cren', this.credentials);
      },
      err => {
        this.errorMsg = err.msg === 'invalid mail' ? 'Invalid Email Id' : 'Password Mismatch'
      }
      );
}
<!-- The Modal -->
<div class="modal" id="myModal" [ngClass]="{'show':showModal}">
    <div class="modal-dialog">
         <div class="modal-content">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Login Failure</h4>
            <button type="button" class="close" data-dismiss="modal" (click)="showModal=false">&times; 
            </button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            {{errorMsg}}
          </div>
         <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal" 
        (click)="showModal=false">Close</button>
          </div>

        </div>
    </div>
</div>

推荐阅读