如何在Angular中实现密码验证器并实现无错误时提示变绿效果？

一、创建带验证规则的表单 #

用Angular的FormBuilder构建密码表单，同时组合内置验证器和自定义验证规则：

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

// 自定义验证器：检查是否包含特殊字符
function hasSpecialCharValidator(control: any) {
  const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/.test(control.value);
  return hasSpecialChar ? null : { noSpecialChar: true };
}

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

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.passwordForm = this.fb.group({
      password: [
        '',
        [
          Validators.required,
          Validators.minLength(8),
          Validators.maxLength(20),
          Validators.pattern(/(?=.*[a-z])(?=.*[A-Z])/), // 强制包含大小写字母
          hasSpecialCharValidator // 强制包含特殊字符
        ]
      ]
    });
  }

  // 快捷获取密码控件
  get passwordCtrl() {
    return this.passwordForm.get('password');
  }

  onSubmit() {
    this.passwordForm.markAllAsTouched();
    if (this.passwordForm.valid) {
      // 这里写表单提交逻辑
      console.log('密码验证通过');
    }
  }
}

二、模板渲染验证提示并绑定状态 #

在模板中为每个验证规则添加提示区域，通过ngClass根据控件状态动态切换样式：

<form [formGroup]="passwordForm" (ngSubmit)="onSubmit()">
  <div class="input-group">
    <label>设置密码：</label>
    <input type="password" formControlName="password" placeholder="请输入密码">
  </div>

  <div class="validation-list">
    <!-- 非空验证提示 -->
    <div 
      [ngClass]="{
        'error': passwordCtrl?.hasError('required') && (passwordCtrl.touched || passwordForm.submitted),
        'success': !passwordCtrl?.hasError('required') && passwordCtrl.valid && (passwordCtrl.touched || passwordForm.submitted)
      }"
    >
      ✅ 密码不能为空
    </div>

    <!-- 长度验证提示 -->
    <div 
      [ngClass]="{
        'error': passwordCtrl?.hasError('minlength') && (passwordCtrl.touched || passwordForm.submitted),
        'success': !passwordCtrl?.hasError('minlength') && passwordCtrl.valid && (passwordCtrl.touched || passwordForm.submitted)
      }"
    >
      ✅ 密码长度至少8位
    </div>

    <!-- 大小写验证提示 -->
    <div 
      [ngClass]="{
        'error': passwordCtrl?.hasError('pattern') && (passwordCtrl.touched || passwordForm.submitted),
        'success': !passwordCtrl?.hasError('pattern') && passwordCtrl.valid && (passwordCtrl.touched || passwordForm.submitted)
      }"
    >
      ✅ 密码需包含大小写字母
    </div>

    <!-- 特殊字符验证提示 -->
    <div 
      [ngClass]="{
        'error': passwordCtrl?.hasError('noSpecialChar') && (passwordCtrl.touched || passwordForm.submitted),
        'success': !passwordCtrl?.hasError('noSpecialChar') && passwordCtrl.valid && (passwordCtrl.touched || passwordForm.submitted)
      }"
    >
      ✅ 密码需包含至少一个特殊字符
    </div>
  </div>

  <button type="submit">确认提交</button>
</form>

三、设置错误/成功状态样式 #

在CSS文件中定义两种状态的样式，实现错误时红色、无错误时绿色的效果：

.input-group {
  margin-bottom: 16px;
}

.validation-list div {
  margin: 8px 0;
  font-size: 14px;
}

.error {
  color: #dc3545;
}

.success {
  color: #28a745;
  font-weight: 500;
}

/* 输入框状态样式 */
input.ng-invalid.ng-touched {
  border-color: #dc3545;
}

input.ng-valid.ng-touched {
  border-color: #28a745;
}

核心逻辑说明 #

• 仅当控件被触摸（用户输入后离开）或表单提交后，才显示验证状态
• 每个提示区域通过passwordCtrl.hasError('xxx')判断是否触发对应错误
• 当控件整体有效且无对应错误时，自动切换为绿色的成功样式

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