我是 Angular 的新手。我想创建一个自定义验证来检查文件大小和扩展名。我使用 FormBuilder 进行验证,使用 FileReader API 获取输入元素字段数据的文件名和大小。
问题:我们能够触发更改事件的自定义验证,但无法获取输入类型字段的值。
请建议我们如何在 Angular 2 中实现文件扩展名和大小的自定义验证。
HTML:
<input type="file" [formControl] = "formName.controls['thumbnailImg']" (change)="changeThumbFile($event)">
组件:
//custom validation
function validateExt(c: FormControl) {
let extension = ['png', 'jpeg', 'gif'];
return extension.indexOf(c.value)? null : { validateExt: { valid: false } }
}
this.form = this.formBuilder.group({
'thumbnailImg': ['', validateExt],
});
changeThumbFile($event){
var file: File = $event.target.files[0];
var fReader: FileReader = new FileReader();
var imgName = file.name;
this.thumbnailName = imgName;
this.formGp.controls['thumbnailImg'].updateValueAndValidity();
}
最佳答案
我有一个解决方案,也许不是完美的解决方案,但它确实有效(同样适用于文件大小),这里是:
首先在 html 文件上我得到文件上传的表单,每次上传文件时我都会在上面调用一个名为 fileEvent() 的特定函数,布局文件包含:
<form [formGroup]="photoForm" (submit)="savePhoto()">
<table>
<tr>
<td>Photo</td>
<td>
<div class="file-edit">
<input type="file" (change)="fileEvent($event)" formControlName="newPhoto" class="form-control" required #newPhoto>
</div>
</td>
<td><p class="warning">{{fileExtensionMessage}}</p></td>
</tr>
<br/>
<tr>
<td></td>
<td><button type="submit" [disabled]='fileExtensionError' class="submit-btn">Save</button></td>
</tr>
</table>
</form>
请注意,如果 fileExtensionError 变量为真,提交按钮将被禁用。
检查验证的函数 fileEvent() 还给我文件名、文件扩展名和文件内容,如下所示:
fileEvent(event) : any {
//*-- this function gets content of uploaded file and validation --
*/
var file = event.target.files[0];
this.photoName = file.name;
var allowedExtensions =
["jpg","jpeg","png","JPG","JPEG","JFIF","BMP","SVG"];
this.fileExtension = this.photoName.split('.').pop();
if(this.isInArray(allowedExtensions, this.fileExtension)) {
this.fileExtensionError = false;
this.fileExtensionMessage = ""
} else {
this.fileExtensionMessage = "Only photos allowed!!"
this.fileExtensionError = true;
}
if (file) {
var reader = new FileReader();
reader.onloadend = (e: any) => {
var contents = e.target.result;
this.photoContent = contents;
}
reader.readAsDataURL(file);
} else {
alert("Failed to load file");
}
}
/*- checks if word exists in array -*/
isInArray(array, word) {
return array.indexOf(word.toLowerCase()) > -1;
}
当然,我在我的类中声明了这些变量:
photoName: any;
photoContent : any;
fileExtension: any;
fileExtensionError: boolean = false;
fileExtensionMessage: any;
photoForm : FormGroup;
希望对大家有帮助:D
关于 Angular 2 : Custom validation for file extensions,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42800867/