我是新手。我想创建一个自定义验证来检查文件大小和扩展名。我正在使用FormBuilder进行验证,并使用FileReader API来获取输入元素字段数据的文件名和大小。
问题:我们能够在变更事件上触发自定义验证,但无法获取输入类型字段的值。
请提出建议,我们如何实现角度2中文件扩展名和大小的自定义验证。
HTML:
<input type="file" [formControl] = "formName.controls['thumbnailImg']" (change)="changeThumbFile($event)">
Run Code Online (Sandbox Code Playgroud)
零件:
//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();
}
Run Code Online (Sandbox Code Playgroud)