Angular 5邮箱验证：如何设置非必填校验规则？

首先明确说：Angular的表单验证库里并没有Validators.notRequired这个内置验证器，不过这完全不用担心——非必填本来就是表单控件的默认行为，只要你没加Validators.required，控件就允许为空。

但你当前的代码email: ['', [Validators.email, Validators.minLength(2)]]会有个小问题：空字符串的长度是0，会触发minLength(2)的验证错误，这和你“非必填”的需求冲突。下面给你两种简单可行的解决办法：

方法一：自定义可选验证器（推荐） #

写一个自定义验证器函数，只在控件有值的时候才应用邮箱格式和最小长度验证，空值直接判定为有效：

import { AbstractControl, ValidatorFn, Validators } from '@angular/forms';

// 自定义可选邮箱验证器
export function optionalEmailWithMinLength(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    // 如果控件值为空（或仅空格），直接返回null（验证通过）
    if (!control.value?.trim()) {
      return null;
    }
    // 有有效输入时，同时验证邮箱格式和最小长度
    const emailError = Validators.email(control);
    const minLengthError = Validators.minLength(2)(control);
    
    // 合并错误信息（如果有）
    return { ...emailError, ...minLengthError } || null;
  };
}

然后在你的表单控件里用这个自定义验证器：

email: ['', [optionalEmailWithMinLength()]]

方法二：动态设置验证器 #

通过监听控件值的变化，动态添加或移除验证规则：

// 假设你的表单是这样定义的（需引入FormBuilder）
this.yourForm = this.fb.group({
  email: ['']
});

// 获取邮箱控件并监听值变化
const emailControl = this.yourForm.get('email');
emailControl?.valueChanges.subscribe(value => {
  if (value?.trim()) {
    // 有输入时，添加邮箱格式和最小长度验证
    emailControl.setValidators([Validators.email, Validators.minLength(2)]);
  } else {
    // 无输入时，清空验证规则
    emailControl.clearValidators();
  }
  // 更新控件的验证状态（避免循环触发值变化事件）
  emailControl.updateValueAndValidity({ emitEvent: false });
});

补充说明 #

• 单独用Validators.email不会影响空值：Angular内置的email验证器对空值是友好的——只有输入了内容但不符合邮箱格式时才会报错，空值会直接通过验证。
• 你的核心问题出在minLength(2)，它会把空字符串（长度0）判定为不符合要求，所以需要通过上述方法让它只在有输入时生效。

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