如何在angular 4中对<input type="file">使用所需的验证

在Angular 4中对<input type="file">使用验证，可以通过以下步骤实现：

基础概念

文件输入验证通常涉及检查文件的类型、大小和其他属性，以确保用户上传的文件符合应用程序的要求。

类型

文件类型验证：检查文件的MIME类型或扩展名。
文件大小验证：限制文件的最大或最小大小。
文件数量验证：限制用户一次可以上传的文件数量。

应用场景

图片上传：确保上传的是图片文件，并且大小在一定范围内。
文档上传：限制只能上传特定类型的文档，如PDF或Word文件。
多媒体上传：对音频和视频文件进行格式和大小的验证。

实现方法

以下是一个简单的示例，展示如何在Angular 4中对文件输入进行类型和大小的验证：

HTML部分

<form [formGroup]="fileUploadForm" (ngSubmit)="onSubmit()">
  <input type="file" formControlName="file" (change)="onFileChange($event)" />
  <div *ngIf="fileUploadForm.controls['file'].invalid && (fileUploadForm.controls['file'].dirty || fileUploadForm.controls['file'].touched)">
    <div *ngIf="fileUploadForm.controls['file'].errors.required">
      File is required.
    </div>
    <div *ngIf="fileUploadForm.controls['file'].errors.invalidFileType">
      Invalid file type. Allowed types: {{ allowedFileTypes.join(', ') }}.
    </div>
    <div *ngIf="fileUploadForm.controls['file'].errors.invalidFileSize">
      File size exceeds the limit of {{ maxFileSize }}MB.
    </div>
  </div>
  <button type="submit" [disabled]="fileUploadForm.invalid">Submit</button>
</form>

TypeScript部分

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

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {
  fileUploadForm: FormGroup;
  allowedFileTypes = ['image/jpeg', 'image/png'];
  maxFileSize = 5; // in MB

  constructor(private fb: FormBuilder) {
    this.fileUploadForm = this.fb.group({
      file: ['', [Validators.required, this.fileTypeValidator.bind(this), this.fileSizeValidator.bind(this)]]
    });
  }

  onFileChange(event) {
    const file = event.target.files[0];
    if (file) {
      this.fileUploadForm.get('file').setValue(file);
    }
  }

  fileTypeValidator(control) {
    const file = control.value;
    if (file) {
      return this.allowedFileTypes.includes(file.type) ? null : { invalidFileType: true };
    }
    return null;
  }

  fileSizeValidator(control) {
    const file = control.value;
    if (file) {
      const sizeInMB = file.size / (1024 * 1024);
      return sizeInMB <= this.maxFileSize ? null : { invalidFileSize: true };
    }
    return null;
  }

  onSubmit() {
    if (this.fileUploadForm.valid) {
      console.log('Form submitted with valid file:', this.fileUploadForm.value.file);
      // Proceed with file upload logic here
    }
  }
}