使用 Angular 进行多文件扩展名验证

Posted 2023-05-09

【中文标题】使用 Angular 进行多文件扩展名验证

【英文标题】：Multiple file extension validation using Angular

【发布时间】：2021-06-18 10:24:22

【问题描述】：

我正在尝试验证多个文件上传的文件类型，但它显示未找到“错误”。请让我知道我是否要离开，如果是这样，检查多个文件的文件类型的更好方法是什么。谢谢！

test-data.component.ts

testDataFileType = "doc,docx,xls,xlsx,pdf,application/msword,application/msexcel,application/pdf";


tdmForm=this.fb.group(
requirement:this.fb.array([this.fb.control('', [Validators.required, fileExtensionValidator(this.testDataFileType)])])
);

constructor(public fb: FormBuilder,)

文件扩展验证器.directive.ts

export function fileExtensionValidator(validExt: string): ValidatorFn 
    return (control: AbstractControl):  [key: string]: any  | null => 
      let forbidden = true;
      if (control.value) 
        const fileExt = control.value.split('.').pop();
        validExt.split(',').forEach(ext => 
          if (ext.trim() == fileExt) 
            forbidden = false;
          
        );
      
      return forbidden ?  'inValidExt': true  : null;
    ;
   

test-data.component.html

     <file-upload [acceptedFileType]="testDataFileType" imagePath="upload_files.png" 
      typeOfFile="requirement"[files]="requirement"></file-upload>
      <div *ngIf="isFormSubmitted && this.requirement.length == 0" class="text-error">
        <ng-container>You must upload a file.</ng-container>
      </div>
      <div *ngFor="let f of this.requirement; index as i">
      <div *ngIf="this.requirement[i].errors?.inValidExt">Invalid file type.</div>
    </div>

【问题讨论】：

我看到很多代码，但没有很多解释。哪一行代码触发了“找不到错误”？这是编译时错误还是运行时错误？你的代码编译了吗？能否提供一个可运行的示例？

感谢您的回复。 无效的文件类型。 它说“错误？”这行代码中不存在。它编译。运行时错误。

【参考方案1】：

如果问题出在 HTML 模板中；我确实看到了一些可能性。

首先，您使用*ngFor 循环遍历this.requirement。在循环内部，您可以访问索引变量，而不是第二次访问this.requirement。

其次，错误会告诉您确切的问题所在。 this.requirement 数组中的至少一个对象上不存在错误变量。您可能可以通过添加另一个安全导航运算符来解决这个问题——就像您已经在 errors 对象上所做的那样。

试试这个作为 HTML 模板文件的最后几行：

<div *ngFor="let f of this.requirement; index as i">
  <div *ngIf="f?.errors?.inValidExt">Invalid file type.</div>
</div>