使用Angular验证多个文件扩展名

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {
  fileForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.fileForm = this.formBuilder.group({
      files: ['', Validators.required]
    });
  }

  get files() {
    return this.fileForm.get('files');
  }

  validateFileExtension(control) {
    const allowedExtensions = ['jpg', 'png', 'gif'];
    const files = control.value;

    for (let i = 0; i < files.length; i++) {
      const fileExtension = files[i].name.split('.').pop().toLowerCase();
      if (!allowedExtensions.includes(fileExtension)) {
        return { invalidExtension: true };
      }
    }

    return null;
  }

  onSubmit() {
    if (this.fileForm.valid) {
      // 处理文件
    }
  }
}