以角度形式为文件上传设置自定义验证未按预期工作

Posted 2023-03-04

【中文标题】以角度形式为文件上传设置自定义验证未按预期工作

【英文标题】：Set Custom Validation for File Upload in angular Form is not working as expected

【发布时间】：2022-01-20 20:56:51

【问题描述】：

我想实现上传pdf文件验证。如果上传的 pdf 文件受密码保护，则不应允许。我正在使用角度打字稿。

下面是我的自定义验证函数

export function pdfFileValidator(file: File,fileExtension:string): AsyncValidatorFn 
    return (control: AbstractControl): Observable< [key: string]: any  | null> => 
    var res = false;
    if(fileExtension.toLowerCase() === 'pdf')
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js'
        var url = URL.createObjectURL(file);
        const loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(function(pdf) console.error(pdf))
        .catch((e:PasswordException) => 
            console.error("File is Password Protected")
            res = true;
        ).finally( ()  =>
            return 
                'EncryptedFileViolated': res,
            ; 
        );
    
    console.error("response =",res)
    return of(null);
    ;

下面是我设置的验证函数

setFileValidators(fileSize: number, fileExtension: string,file:File) 
        this.form.get('file')?.setValidators([FileSizeValidator(fileSize, this.maxSizeAllowedInMB),
FileExtensionValidator(fileExtension, ['pdf','jpg','png'])]);
this.form.get('file')?.addAsyncValidators(pdfFileValidator(file,fileExtension));
        this.form.get('file')!.updateValueAndValidity()
        console.error(this.form);
      

现在的工作方式

这两行在没有等待pdfFileValidator函数完全执行的情况下早先执行

  this.form.get('file')!.updateValueAndValidity()
  console.error(this.form);

Form 显示status = valid

我希望this.form.get('file')?.addAsyncValidators() 应该等待pdfFileValidator() 函数完成，然后执行updateValueAndValidity() 函数。

我们如何实现这一点？

【参考方案1】：

您的 pdfJs 库函数需要时间，并且您已使用 setValidators 函数设置同步验证，因此它无法按您的意愿工作。

您必须使用setasyncvalidators 设置异步验证器

【讨论】：

我试过 export function pdfFileValidator(file: File,fileExtension:string): AsyncValidatorFn return (control: AbstractControl):Observable< [key: string]: any | null> => --same code --; 和设置验证 this.form.get('file')?.addAsyncValidators(pdfFileValidator(file,fileExtension)); 但它仍然有效