Angular响应式表单验证异常：填单个字段后错误提示全部消失

当前登录表单验证存在问题：点击空表单的登录按钮时错误提示正常，但仅填写一个字段时，两个字段的错误提示都会消失。

问题根源 #

1. ngDoCheck中重复订阅form.valueChanges，导致多次触发状态更新，逻辑冗余且易引发混乱
2. 字段错误提示的条件错误关联了全局isValid变量，比如密码字段用passwordValidation || !isValid，只要表单整体无效就显示密码错误，忽略了字段自身的验证状态
3. isValid变量的更新逻辑混乱，没有准确反映字段的触摸和验证状态

修复步骤及代码调整 #

1. 修正Component逻辑（login.component.ts） #

移除冗余的DoCheck实现，优化字段验证逻辑，提交时手动触发表单验证：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';

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

  constructor(private formBuilder: FormBuilder, private router: Router) {}

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    });
  }

  get emailValidation() {
    const emailControl = this.form.get('email');
    return emailControl?.invalid && emailControl?.touched;
  }

  get passwordValidation() {
    const passwordControl = this.form.get('password');
    return passwordControl?.invalid && passwordControl?.touched;
  }

  onClick() {
    if (this.form.valid) {
      this.router.navigate(['/dashboard']);
    } else {
      // 手动标记所有字段为已触摸，强制触发错误提示
      this.form.markAllAsTouched();
    }
  }
}

2. 修正模板逻辑（login.component.html） #

移除全局isValid依赖，错误提示仅根据字段自身状态显示：

<div class="main">
    <div class="image">
        <img src="./assets/icons/login.png" alt="Login">
        <p>Login in to your account</p>
    </div>
        <form [formGroup]="form" class="login" (ngSubmit)="onClick()">
            <p class="error-message" style="font-size: large;" *ngIf="form.invalid && form.touched">Please fill in your info</p>
            <p>Enter your user name and password</p>
            <div class="userName">
                <label for="userName">User name</label>
                <br>
                <input [ngClass]="{'error': emailValidation}" type="text" id="userName" placeholder="Your user name" formControlName="email">
                <p class="error-message" *ngIf="emailValidation">Please enter your user name</p>
            </div>
            <div class="pass">
                <label for="pass">Password</label>
                <br>
                <input [ngClass]="{'error': passwordValidation}" type="password" id="pass" placeholder="your password" formControlName="password">
                <p class="error-message" *ngIf="passwordValidation">Please enter your user password</p>
            </div>
            <button class="btnConfig" id="btnlogin"><img src="./assets/icons/login-btn.png" alt="login"> Login</button>
        </form>             
</div>

修复说明 #

• 移除ngDoCheck的重复订阅，避免性能损耗和逻辑混乱
• 字段错误提示仅依赖自身的invalid和touched状态，确保只在字段确实有问题且用户交互过（或点击提交）时显示
• 提交时调用markAllAsTouched()，强制所有字段触发验证，解决空表单提交后部分填写时的提示异常问题

内容的提问来源于stack exchange，提问作者ِbossun