Angular邮箱验证器空格问题：自动填充致邮箱末尾含空格

这个问题我之前在项目里也碰到过，三星等部分安卓设备的自动填充功能确实会给邮箱字段末尾加上多余空格，直接触发Validators.email的验证失败，挺头疼的。这里给你几个实用的解决办法：

方法一：自定义带Trim的邮箱验证器 #

直接写一个自定义验证器，先把输入值去除首尾空格，再进行邮箱格式校验，不管自动填充带不带空格都能处理：

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

// 自定义带trim的邮箱验证器
export function trimmedEmailValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const trimmedValue = control.value?.trim();
    // 为空时返回required错误（配合原有必填校验）
    if (!trimmedValue) {
      return Validators.required(control);
    }
    // 用原生邮箱验证器校验trim后的值
    const emailError = Validators.email({ value: trimmedValue });
    return emailError ? { invalidEmail: true } : null;
  };
}

然后修改你的表单配置：

import { trimmedEmailValidator } from './your-validators-path';

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

方法二：监听字段值变化，自动Trim #

如果不想改验证器，也可以通过监听表单控件的valueChanges事件，自动修正输入值的首尾空格：

ngOnInit(): void {
  // 监听邮箱字段变化，自动去除首尾空格
  this.form.get('email')?.valueChanges.subscribe(value => {
    if (typeof value === 'string') {
      // 设置emitEvent: false避免循环触发值变化
      this.form.get('email')?.patchValue(value.trim(), { emitEvent: false });
    }
  });
}

这个方法的好处是表单里存的直接是修正后的值，后续提交时不需要额外处理。

方法三：使用Angular 14+内置Trim选项 #

如果你的项目用的是Angular 14及以上版本，直接在FormControl里设置trim: true即可，Angular会自动帮你处理首尾空格：

let formConfig = {
  email: ['', {
    validators: [Validators.required, Validators.email],
    updateOn: 'blur', // 可选，建议配合blur触发更新，避免实时trim影响输入体验
    trim: true
  }],
  password: ['', [Validators.required]],
};
this.form = this.formBuilder.group(formConfig);

另外还有个小技巧：给邮箱输入框加上autocomplete="username"属性，部分设备的自动填充逻辑对这个属性的识别更准确，可能减少空格问题的出现：

<input formControlName="email" type="email" autocomplete="username">

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