不执行 onSubmit 函数中的登录函数但是也没有显示错误

问题描述

我有一个带有 requestCall 函数的 httpService：

import { Injectable } from '@angular/core';
import { HttpClient,HttpErrorResponse } from '@angular/common/http';
import { ApiMethod,AuthEndPoints } from '../conts';
import { environment } from '../../../../environments/environment';
import { catchError } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor(private http: HttpClient) {
  }

  requestCall(method: ApiMethod,api: AuthEndPoints,data?: any): Observable<any> {
    let response;
    switch (method) {
      case ApiMethod.GET:
        response = this.http.get(`${environment.baseUrl}${api}`).pipe(
          catchError(err => this.handleError(err,this))
        );
        break;
      case ApiMethod.POST:
        response = this.http.post(`${environment.baseUrl}${api}`,data).pipe(
          catchError(err => this.handleError(err,this))
        );
        break;
      case ApiMethod.PUT:
        response = this.http.put(`${environment.baseUrl}${api}`,this))
        );
        break;
      case ApiMethod.DELETE:
        response = this.http.delete(`${environment.baseUrl}${api}`).pipe(
          catchError(err => this.handleError(err,this))
        );
        break;
    }
    return response;
  }
}

此函数在 authService 中调用：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpService } from '../../core/services/http/http.service';
import { ApiMethod,AuthEndPoints } from '../../core/services/conts';
import { StorageService } from '../../core/services/storage/storage.service';

export interface LoginForm {
  email: string;
  password: string;
}

export interface User {
  name?: string;
  username?: string;
  email?: string;
  password?: string;
  passwordConfirm?: string;
}


@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(
    private http: HttpService,private router: Router,private storage: StorageService
  ) { }



  login(loginForm: LoginForm) {
    return this.http.requestCall(ApiMethod.POST,AuthEndPoints.LOGIN,{email: loginForm.email,password: loginForm.password}).subscribe(res => {
      this.storage.savetoken(res.auth_token);
      this.router.navigate(['/dashboard']);
    },(error) => {console.log(error)})
  }

}

并且在 loginComponent 中调用来自 authService 的登录函数：

import { Component,OnInit} from '@angular/core';
import { FormControl,FormGroup,Validators } from '@angular/forms';
import { AuthService } from '../../service/auth.service';
import { Router } from '@angular/router';

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

  loginForm: FormGroup;
  submitted = false; // implementieren

  constructor(
    private authService: AuthService) {
  }

  ngOnInit(): void {
    this.initLoginForm();
  }

  /**
   * loginForm
   */
  initLoginForm(): void {
    this.loginForm = new FormGroup({
      email: new FormControl(null,[
        Validators.required,Validators.email,Validators.minLength(8)
      ]),password: new FormControl(null,Validators.minLength(4)
      ])
    });
  }

  /**
   * onSubmit
   */
  onSubmit() {
    if (this.loginForm.invalid) {
      return;
    }
    this.authService.login(this.loginForm.value)
  }
}

LogingComponentHtml：

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <h1 style="text-align: center !important; width: 100%">Login Page</h1>
  </mat-toolbar-row>
</mat-toolbar>


<div class="row">
  <div class="col-md-12">
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <div class="container">

        <div class="form-group">
          <mat-form-field>
            <label>
              <input formControlName="email" matInput placeholder="E-Mail">
            </label>
          </mat-form-field>
        </div>

        <div class="form-group">
          <mat-form-field>
            <label>
              <input formControlName="password" matInput placeholder="Password">
            </label>
          </mat-form-field>
        </div>

        <button mat-flat-button color="primary" [disabled]="!loginForm.valid" type="submit">Login</button>
      </div>
    </form>
  </div>
</div>

现在当我调用 onSubmit() 函数时，什么也没有发生。我没有登录也没有重定向。但是也没有显示错误信息

我错过了什么吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）