Angular中静态账号密码验证失败时在登录按钮下方显示错误信息的技术咨询

没问题，我来帮你搞定这个错误提示的需求。你只需要简单三步就能实现验证失败时在按钮下方显示错误信息：

1. 在组件中添加错误状态变量 #

首先在login.component.ts里新增一个变量，用来存储登录失败的错误信息：

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit { // 补全OnInit实现
  username!: string;
  password!: string;
  formData!: FormGroup;
  loginError: string | null = null; // 新增：存储错误信息的变量

  constructor(private authService: AuthService, private router: Router) { }

  ngOnInit() {
    this.formData = new FormGroup({
      username: new FormControl("admin", [Validators.required]),
      password: new FormControl("admin", [Validators.required])
    });
  }

  doLogin(data: any) {
    this.username = data.username;
    this.password = data.password;
    this.loginError = null; // 每次登录前清空旧错误
    console.log("Login page: " + this.username);
    console.log("Login page: " + this.password);
    this.authService.login(this.username, this.password)
      .subscribe(data => {
        console.log("Is Login Success: " + data);
        if (data) {
          this.router.navigate(['/home']);
        } else {
          // 验证失败时设置错误提示文本
          this.loginError = "用户名或密码不正确";
        }
      });
  }
}

这里的关键改动：

• 新增loginError变量跟踪错误状态，初始为null表示无错误
• 每次调用登录方法前清空错误信息，避免旧提示残留
• 登录失败时给loginError赋值对应的提示文本

2. 在模板中添加错误提示元素 #

接下来修改login.component.html，在登录按钮下方添加条件渲染的错误提示：

<!-- Page Content -->
<div id="wrapper">
  <body>
    <div class="card card-container">
      <img id="profile-img" src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" class="profile-img-card" />
      <div class="row">
        <div class="col-lg-12 text-center" style="padding-top: 20px;">
          <div class="container box" style="margin-top: 10px; padding-left: 0px; padding-right: 0px;">
            <div class="row">
              <div class="col-12" style="text-align: center;">
                <form [formGroup]="formData" (ngSubmit)="doLogin(formData.value)" class="form-signin">
                  <h2 class="form-signin-heading">Prijava</h2>
                  <label for="inputEmail" class="sr-only">Username</label>
                  <input class="form-control" type="text" id="username" formControlName="username" placeholder="Username" required autofocus />
                  <label for="inputPassword" class="sr-only">Password</label>
                  <input type="password" id="inputPassword" class="form-control" formControlName="password" placeholder="Password" required>
                  <div *ngIf="false"> Password must be at least 6 characters </div>
                  <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
                  <!-- 新增：错误提示元素 -->
                  <div *ngIf="loginError" class="text-danger mt-2 text-center">
                    {{ loginError }}
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</div>

这里的核心是*ngIf="loginError"：当loginError不为null时，这个div会自动显示。text-danger用Bootstrap样式把文本设为红色，mt-2增加顶部间距，让提示和按钮保持合适的距离。

3. （可选）确认AuthService的逻辑 #

假设你的AuthService里的login方法是这样实现的（如果不是可以参考调整）：

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  login(username: string, password: string): Observable<boolean> {
    // 静态验证admin/admin
    const isValid = username === 'admin' && password === 'admin';
    return of(isValid);
  }
}

这样就能确保验证逻辑正确返回布尔值，组件里的订阅能准确处理成功/失败的分支。

修改完成后，当用户输入的用户名或密码不是admin/admin时，登录按钮下方会自动显示红色的错误提示；登录成功时错误提示会被清空并跳转到首页。

内容的提问来源于stack exchange，提问作者micho 95