Angular登录表单验证异常：点击登录始终提示未输入账号密码

问题根源 #

1. 输入框未绑定响应式表单控件：HTML中的邮箱、密码输入框缺少formControlName属性，导致Angular无法将用户输入同步到组件的form对象中，form.getRawValue()始终返回空字符串，触发noemail和nopwd状态为true。
2. 提交逻辑顺序错误：先调用登录接口再做字段校验，无效请求会被发送，且校验逻辑无法阻止错误状态触发。
3. 手动维护校验状态冗余：自定义noemail、nopwd等变量，未利用Angular响应式表单自带的验证状态，增加代码复杂度。

修改方案 #

1. 修复HTML模板（绑定表单控件+优化提示逻辑） #

将输入框与表单控件绑定，并基于表单自带状态显示验证提示：

<app-header style="background: linear-gradient(to left ,#032961,#4588ee);"></app-header>

<div class="page-content">
    <div class="form-v9-content" >
        <form [formGroup]="form" (ngSubmit)="onSubmit()" class="form-detail">
            <h2>Login Form</h2>
            <div class="form-row-total">
                <div *ngIf="login" class="alert alert-success" role="alert">
                    Login avec succés
                </div>
                <div class="form-row">
                    <!-- 绑定email表单控件，改为type="email" -->
                    <input type="email" name="email" id="email" class="input-text" placeholder="Your Email" formControlName="email">
                </div>
                <div *ngIf="errorMessage" class="alert alert-danger" role="alert">
                    {{ errorMessage }}
                </div>
                <!-- 基于表单控件状态显示必填提示 -->
                <div *ngIf="form.get('email')?.hasError('required') && form.get('email')?.touched" class="alert alert-danger" role="alert">
                    Enter an email
                </div> 
                <!-- 基于表单控件状态显示格式错误提示 -->
                <div *ngIf="form.get('email')?.hasError('email') && form.get('email')?.touched" class="alert alert-danger" role="alert">
                    Invalid email form
                </div>
            </div>
            <div class="form-row-total">
                <div class="form-row">
                    <!-- 绑定password表单控件 -->
                    <input type="password" name="password" id="password" class="input-text" placeholder="Your Password" formControlName="password">
                </div>
                
                <div *ngIf="errorMessage" class="alert alert-danger" role="alert" >
                    {{ errorMessage }}
                </div>
                <!-- 基于表单控件状态显示必填提示 -->
                <div *ngIf="form.get('password')?.hasError('required') && form.get('password')?.touched" class="alert alert-danger" role="alert"  style="margin-top: 90px;">
                    Enter a password
                </div>
            </div>
            <div class="form-row-last">
                <input type="submit" name="register" class="register" value="Log in" [disabled]="isLoginInProgress">
            </div>
        </form>
    </div>
</div>

2. 优化TS组件（利用表单验证+重构提交逻辑） #

删除冗余变量，使用Angular自带验证器，调整提交顺序：

import { Component, inject } from '@angular/core';
import { HeaderComponent } from "../header/header.component";
import { FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../../auth.service';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
    selector: 'app-login',
    standalone: true,
    templateUrl: './login.component.html',
    styleUrl: './login.component.css',
    imports: [HeaderComponent, CommonModule, ReactiveFormsModule]
})
export class LoginComponent {
    isLoginInProgress: boolean = false;
    errorMessage: string | null = null; 
    
    // 给email添加内置邮箱格式验证
    form = this.fb.nonNullable.group({ 
        email: ['', [Validators.required, Validators.email]],
        password: ['', Validators.required],
    });
    
    constructor(
        private fb: FormBuilder, 
        private authService: AuthService,
    ) {
        const accessToken = localStorage.getItem('accessToken');
        if (accessToken) {
            window.history.back();
        }
    }
    
    router = inject(Router);
    login = false;
  
    onSubmit(): void {
        this.errorMessage = null;
        this.isLoginInProgress = true;

        // 标记所有控件为已触碰，触发前端验证提示
        this.form.markAllAsTouched();

        // 表单无效则直接返回，不调用接口
        if (this.form.invalid) {
            this.isLoginInProgress = false;
            return;
        }

        const rawform = this.form.getRawValue();
        const email = rawform.email.trim();
        const password = rawform.password.trim();

        this.authService.login(email, password).subscribe({
            next: (response) => {
                console.log(response!.user!.uid);
                const accessToken = response!.user!.accessToken;
                const user_uid = response!.user!.uid;
                localStorage.setItem('accessToken', accessToken);
                localStorage.setItem('user_uid', user_uid);
                // 移除window.location.reload，路由导航无需刷新页面
                this.router.navigateByUrl('/');
                this.isLoginInProgress = false;
            },
            error: (err: any) => {
                this.handleAuthError(err);
                this.isLoginInProgress = false;
            },
        });
    }
  
    handleAuthError(err: any): void {
        console.error('Authentication Error:', err); 
        switch (err.code) {
            case 'auth/invalid-credential':
                this.errorMessage = 'Invalid password or email';
                break;
            case 'auth/invalid-email':
                this.errorMessage = 'Invalid email format';
                break;
            default:
                this.errorMessage = 'Login failed, please try again';
        }
    }
  
    isLoggedIn(): boolean {
        return localStorage.getItem('accessToken') !== null;
    }
}

关键优化点 #

• 移除noemail、nopwd、noform等冗余变量，使用form.get('控件名')?.hasError('验证器类型')判断验证状态
• 给邮箱字段添加Validators.email内置验证器，替代自定义validateEmail函数
• 提交前先校验表单有效性，无效则终止请求
• 标记表单控件为已触碰（markAllAsTouched），确保用户点击提交后能看到所有验证提示
• 移除不必要的window.location.reload，路由导航后无需刷新页面

内容的提问来源于stack exchange，提问作者21 cars