用于显示登录错误消息的Angular表单验证

<form #loginForm="ngForm" (ngSubmit)="login()">
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required [(ngModel)]="username">
    <div *ngIf="loginForm.controls.username.invalid && loginForm.controls.username.touched">
      <div *ngIf="loginForm.controls.username.errors.required">用户名不能为空。</div>
    </div>
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required [(ngModel)]="password">
    <div *ngIf="loginForm.controls.password.invalid && loginForm.controls.password.touched">
      <div *ngIf="loginForm.controls.password.errors.required">密码不能为空。</div>
    </div>
  </div>
  <button type="submit">登录</button>
</form>

import { Component } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  username: string;
  password: string;
  loginErrors: any;

  login() {
    if (this.username === 'admin' && this.password === 'password') {
      // 登录成功
    } else {
      this.loginErrors = {
        username: { required: true },
        password: { required: true }
      };
    }
  }
}