在 angular 表單中為文件上傳設置自定義驗證未按預期工作

Question

我想實現上傳 pdf 文件驗證。 如果上傳的 pdf 文件受密碼保護，則不應允許。 我正在使用 angular typescript。

以下是我的自定義驗證 Function

export function pdfFileValidator(file: File,fileExtension:string): ValidatorFn {
    return (control: AbstractControl): { [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 null;
    };
}

下面是我設置的驗證 function

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

它現在是如何工作的

這兩行早先執行，無需等待pdfFileValidator function 的完整執行

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

並且表格顯示status = valid

我希望this.form.get('file')?.setValidators()應該等待pdfFileValidator() function 完成，然后執行updateValueAndValidity() function。

我們如何實現這一點？

Answer 1

您的 pdfJs 庫 function 需要時間，並且您已使用setValidators function 設置同步驗證，因此它無法按您的意願工作。

您必須使用setasyncvalidators設置異步驗證器