Angular自定义验证报错：Cannot read properties of undefined (reading 'file')解析

问题现象 #

开发带自定义验证的Angular组件时，已在组件顶部声明并赋值file变量，但在自定义验证函数validateFileSize中使用该变量时，修改表单值会抛出错误：

ERROR TypeError: Cannot read properties of undefined (reading 'file')

需要明确三个核心问题：

• 自定义验证函数是否未被监听，导致先于其他函数执行？
• 为什么变量值不存在且被赋值为undefined？
• 如何在文件大小验证中正确获取文件大小？

错误原因分析 #

1. 函数上下文丢失（核心原因） #

当你将validateFileSize作为验证器传入FormControl时，Angular调用该函数时会丢失组件的上下文——此时函数内部的this不再指向组件实例，而是undefined。因此访问this.file时会触发“无法读取file属性”的错误。

这和验证函数的执行时机无关，本质是函数绑定问题：验证函数确实会被正常触发，但触发时的this指向错误。

2. 变量初始化的次要影响 #

虽然你的代码中ngOnInit先调用resetForm初始化file变量，但如果验证函数在组件上下文未完全初始化时被调用（极端场景），也可能导致this.file为undefined，但这种情况发生概率极低，核心问题仍为上下文丢失。

正确解决方法 #

方案1：用箭头函数绑定上下文 #

箭头函数会继承当前组件的上下文，可直接将验证函数改为箭头函数：

validateFileSize = (control: AbstractControl): ValidationErrors | null => {
  let maxSize = 1;

  if (!control.value || !this.file)
    return null;

  const fileSize = (this.file.value.size / 1024 / 1024); // 转换为MB

  if (fileSize > maxSize) {
    return { 'validateFileSize': true };
  }
  return null;
}

或者在声明FormControl时用箭头函数包裹原函数：

ImageURL: new FormControl('', [this.ValidateExtentionFile, (control) => this.validateFileSize(control)])

方案2：在构造函数中手动绑定上下文 #

在组件构造函数中，手动将validateFileSize的this指向组件实例：

constructor(private fakeData: FakeDataService, private alert: AlertService) {
  this.validateFileSize = this.validateFileSize.bind(this);
}

方案3：直接从控件值获取文件（推荐） #

无需额外维护file变量，直接将文件对象绑定到ImageURL控件，验证时从控件值读取文件：

1. 修改文件选择事件处理：

onFileSelected(event: any) {
  const file = event.target.files[0];
  this.penaltyForm.get('ImageURL')?.setValue(file); // 将文件对象直接赋值给控件
}

2. 修改验证函数：

validateFileSize(control: AbstractControl): ValidationErrors | null {
  let maxSize = 1;

  const file = control.value;
  if (!file) return null;

  const fileSize = (file.size / 1024 / 1024); // 转换为MB

  if (fileSize > maxSize) {
    return { 'validateFileSize': true };
  }
  return null;
}

该方法避免了上下文依赖，逻辑更简洁独立。

内容的提问来源于stack exchange，提问作者m-Esmaeil