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

【问题标题】：Multiple file extension validation using Angular使用 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>

【问题讨论】：

我看到很多代码，但没有很多解释。哪一行代码触发了“找不到错误”？这是编译时错误还是运行时错误？你的代码编译了吗？能否提供一个可运行的示例？
感谢您的回复。
无效的文件类型。
它说“错误？”这行代码中不存在。它编译。运行时错误。

标签： angular typescript validation file-type multiple-file-upload

【解决方案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>

【讨论】：