Angular中如何将DOM事件传递给自定义表单验证器

使用Angular响应式表单实现文件上传验证时，自定义验证器仅能获取到类似C:\fakepath\abc.xlsx的文件路径字符串，无法获取文件的类型、大小等完整属性，导致无法按条件验证文件。

Angular默认会将文件输入框的value（即文件路径字符串）绑定到表单控件，而非文件对象本身。要解决这个问题，需要在文件选择的change事件中手动将File对象赋值给表单控件，同时修正验证器的逻辑错误。

1. 实现handleFileInput方法传递文件对象 #

在sheet.component.ts中补充handleFileInput方法，将选中的文件对象赋值给表单控件：

handleFileInput(event: Event) {
  const fileInput = event.target as HTMLInputElement;
  if (fileInput.files && fileInput.files.length > 0) {
    // 将选中的第一个文件赋值给表单控件
    this.sheetForm.get('sheetUpload')?.setValue(fileInput.files[0]);
  } else {
    this.sheetForm.get('sheetUpload')?.setValue(null);
  }
}

2. 修正自定义验证器逻辑 #

原验证器存在逻辑错误（如value.length < 0永远为false、文件类型判断错误），修改file.validator.ts如下：

import { AbstractControl } from '@angular/forms';

export function ValidateFile(control: AbstractControl): { [key: string]: boolean } | null {
  const file = control.value as File;

  if (!file) {
    return null;
  }

  // xlsx文件的标准MIME类型
  const validMimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
  const isValidType = file.type === validMimeType;
  // 验证文件大小不超过5MB（5*1024*1024=5242880字节）
  const isValidSize = file.size <= 5242880;

  if (!isValidType || !isValidSize) {
    return { invalidFile: true };
  }

  return null;
}

3. 表单初始化保持逻辑一致 #

表单初始化代码无需大幅修改，保持sheetUpload初始值为null即可：

constructor(
  private formBuilder: FormBuilder,
  private alertService: AlertService
) {
  this.sheetForm = this.formBuilder.group({
    sheetType: ['Select Sheet Type', [Validators.required]],
    sheetUpload: [null, [Validators.required, ValidateFile]],
    sheetDescription: [
      null,
      [
        Validators.required,
        Validators.minLength(10),
        Validators.maxLength(100),
      ],
    ],
  });
}

4. 模板部分无需调整 #

原sheet.component.html的结构保持不变，(change)事件会触发handleFileInput方法，将真实文件对象传递给表单控件供验证器使用。

关键说明 #

• 浏览器出于安全限制，不会暴露本地真实文件路径，input[type=file]的value仅显示fakepath开头的字符串是正常行为，必须通过files属性获取真实文件对象。
• 验证文件类型时，优先使用MIME类型而非文件扩展名，避免扩展名被篡改导致的验证失效。

内容的提问来源于stack exchange，提问作者Package.JSON