如何通过 angular 表单验证图像尺寸或是否可以使用 angular 表单验证图像尺寸？

Question

我使用了 angular 表单和文件输入类型以及自定义验证器。

问题是，

每当表单值发生变化时，我只会得到假路径 URL。假路径 URL 没有 文件元数据 。那么我该如何验证图像尺寸。

fake_path : C:\fakepath\lutosa_images_480x600.jpeg .

是否可以使用 angular 表格？

或

是否可以从 fake_path 获取文件元数据？

html 文件:

<form [formGroup]="productCategoryAddForm">
<input
type="file"
accept="image/*"
(change)="getImageData($event)"
formControlName="product_category_image"
/>
</form>

ts 文件：

initializeForm() {
this.productCategoryAddForm = this.fb.group({
product_category_image: [null, [Validators.required, dimensionValidator]],
});
}

自定义验证器

import { AbstractControl } from '@angular/forms';

export interface ReturnType {
[key: string]: boolean;
}

export function dimensionValidator(control: AbstractControl): ReturnType | null {
console.log('control.value', control.value);

if (control.value) {
//success 
} else {
//fail
}
}

注：

without angular forms i can validate image dimensions.. Use change() and FileReader();

Answer 1

是的，可以验证。我们可以使用 patchValue() 并将图像属性发送到 customvalidator.

getImageData() 中的补丁值：

 getImageData(data: any) {
 if (data.target.files[0]) {
    const file = data.target.files[0];
    const reader: any = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e: any) => {
      this.base64Data = reader.result.split(',').pop();
      const image = new Image();
      image.src = e.target.result;
      image.onload = (rs) => {
        const width = rs.currentTarget['width'];
        const height = rs.currentTarget['height'];
        const dimensions = {
          width,
          height,
        };
        this.productCategoryAddForm.patchValue({ product_category_image: dimensions });
      };
    };
  }
}

自定义验证器：

import { AbstractControl } from '@angular/forms'; 

export interface ReturnType {
   [key: string]: boolean; 
 }

 export function dimensionValidator(control: AbstractControl): 
 ReturnType| null 
 {
   if (typeof control.value === 'object') {
    if (control.value) {
      const width = control.value.width;
      const height = control.value.height;
      const invalidDimension = width !== 600 && height !== 300;
      return invalidDimension ? { invalidDimensionError: true } : null;
     }
    } else {
     return null;
    }
  }

如何通过 angular 表单验证图像尺寸或是否可以使用 angular 表单验证图像尺寸？

How to do validate image dimensions through angular forms or Is it possible validate to using angular forms?

angular

angular-reactive-forms