Angular 提交表格，保留第6页中的同一页

我在登录表单中遇到问题。当凭据无效时，表单将重新加载，因此由于重新加载问题，我无法显示响应服务器发送的错误

我尝试过使用默认设置，但它不起作用

我的表格是：

    <mat-card class="login-card">
      <mat-card-header>
        <mat-card-title>Login</mat-card-title>
        <div *ngIf="error" class="alert alert-danger">
          {{ error }}
        </div>
      </mat-card-header>
      <form class="login-form" [formGroup]="loginForm" (ngSubmit)="loginSubmit()">
        <mat-card-content>
          <p>
            <mat-form-field>
              <input matInput
                     type="text"
                     placeholder="Correo electrónico"
                     formControlName="email">
            </mat-form-field>
          </p>
          <p>
            <mat-form-field>
              <input matInput
                     type="password"
                     placeholder="Contraseña"
                     formControlName="password">
            </mat-form-field>
          </p>
        </mat-card-content>
        <mat-card-actions>
          <input matInput
                  type="submit" 
                  [disabled]="!loginForm.valid"
                  color="primary">
            Login
          </button>
        </mat-card-actions>
      </form>
    </mat-card>

当用户单击submit按钮并调用发布登录操作的服务时，将调用上面的loginForm函数。当登录未成功时，我希望在表单HTML页面中显示错误，但登录表单正在重新加载，所以我无法执行此操作

最后，AuthService是这样的：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

import { map } from 'rxjs/operators';

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

  API_URL = 'http://localhost:8000';

  constructor(private http: HttpClient) { }

  login(email: string, password: string) {
    return this.http.post<any>(`${this.API_URL}/api/login`, { email, password })
      .pipe(
        map(user => {
          // login successful if there's a jwt token in the response
          if (user && user.token) {
            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('currentUser', JSON.stringify(user));
          }

          return user;
        })
      );
  }

  logout() {
    return this.http.post<any>(`${this.API_URL}/api/logout`, null)
      .pipe(
        map(resp => {
          // remove user from local storage to log user out
          localStorage.removeItem('currentUser');

          return true;
        })
      );
  }
}

从'@angular/core'导入{Injectable}；
从“@angular/common/http”导入{HttpClient，HttpErrorResponse}；
从“rxjs/operators”导入{map}；
@可注射（{providedIn:'root'}）
导出类身份验证服务{
美国石油学会http://localhost:8000';
构造函数（私有http:HttpClient）{}
登录（电子邮件：字符串，密码：字符串）{
返回this.http.post（`${this.API_URL}/API/login`，{email，password}）
.烟斗(
映射（用户=>{
//如果响应中有jwt令牌，则登录成功
if（user&&user.token）{
//将用户详细信息和jwt令牌存储在本地存储中，以便在页面刷新之间保持用户登录
localStorage.setItem（'currentUser'，JSON.stringify（user））；
}
返回用户；
})
);
}
注销（）{
返回this.http.post（`${this.API\u URL}/API/logout`，null）
.烟斗(
映射（resp=>{
//从本地存储中删除用户以注销用户
localStorage.removietem（'currentUser'）；
返回true；
})
);
}
}

---

登录位置。

我认为您的问题中缺少一些细节来帮助我们理解：当出现错误时，服务器是否会以错误代码（如400+或500+）响应？此外，您不显示您的authService。它是否正确地发出（或传输）错误？您在其中使用HttpClient吗？@Pac0服务器是一个Laravel API并返回401:

return response（）->json（['error'=>'Unauthorized']，401）我添加了AuthService代码。Thank.console.log在提交函数中输入'this.loginForm.invalid'的值，因为正如您所说的，页面正在重新加载，这意味着无效登录的'if'条件没有得到满足。您还可以尝试打开路由跟踪，以查看页面重新加载时的路由。这可能有助于您确定问题所在。@sanky表单是有效的，我的意思是电子邮件是有效的，密码是有效的密码，但此电子邮件/密码不存在，因此服务器发送身份验证401错误，我希望在表单页中显示此错误，但我无法，因为重新加载：（谢谢
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

import { map } from 'rxjs/operators';

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

  API_URL = 'http://localhost:8000';

  constructor(private http: HttpClient) { }

  login(email: string, password: string) {
    return this.http.post<any>(`${this.API_URL}/api/login`, { email, password })
      .pipe(
        map(user => {
          // login successful if there's a jwt token in the response
          if (user && user.token) {
            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('currentUser', JSON.stringify(user));
          }

          return user;
        })
      );
  }

  logout() {
    return this.http.post<any>(`${this.API_URL}/api/logout`, null)
      .pipe(
        map(resp => {
          // remove user from local storage to log user out
          localStorage.removeItem('currentUser');

          return true;
        })
      );
  }
}