自定义验证在 Angular 中不起作用

Question

我在 Angular 中有一个带有自定义验证的表单生成器，但我在自定义验证中读取文件后无法获取文件类型。

这里是 stackblitz：

https://stackblitz.com/edit/angular-ivy-atwqqc?file=src%2Fapp%2Fapp.component.ts

TS 文件

function checkFileType(
  control: AbstractControl
): { [key: string]: any } | null {
  const files: File = control.value;
  const errors: string[] = [];

  if (files) {
    console.log(files);
    if (files.type === "txt") {
      errors.push(`${files[0].name} has an invalid type of unknown\n`);
    }
    console.log(files.type); //This is always null. How can I get file type

    return errors.length >= 1 ? { invalid_type: errors } : null;
  }

  return null;
}


  onSelection($event) {
    const fileReader = new FileReader();
      const file = $event.target.files[0];
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        this.reactiveForm.patchValue({
          file: fileReader.result
        });
      };  
  }

Answer 1

问题来自 readAsDataURL()。它正在将其编码为 base 64 字符串，这意味着它没有属性 type 可供查看。事实上，它没有任何类型可供查看，因为它是 string 而不是 File。如果你删除它，并将你的 file 变量设置为你的表单，你将获得你想要的属性

function checkFileType(
  control: AbstractControl
): { [key: string]: any } | null {
  const file: File = control.value;
  const errors: string[] = [];

  if (file) {
    console.log(file);
    if (file.type === "txt") {
      errors.push(`${file.name} has an invalid type of unknown\n`);
    }
    console.log(file.type); //This is always null. How can I get file type

    return errors.length >= 1 ? { invalid_type: errors } : null;
  }

  return null;
}


  onSelection($event) {
    const fileReader = new FileReader();
      const file = $event.target.files[0];
      fileReader.onload = () => {
        this.reactiveForm.patchValue({
          file: file
        });
      };  
  }

自定义验证在 Angular 中不起作用

Custom validation does not work in Angular

angular

angular-reactive-forms

angular-forms