Angular 8反应式表单文件上载错误 [英] Error in Angular 8 reactive form file upload
问题描述
我正在尝试在Angular 8中上传文件,但出现以下错误且无法弄清
I am trying to upload file in Angular 8 but getting below error and not able to figure it out
ERROR DOMException: "An attempt was made to use an object that is not, or is no longer, usable"
选择文件时出现
以上错误.下面是我的方法
above error comes when I select a file. Below is my approach
Component.ts
Component.ts
import { Component, OnInit } from '@angular/core';
import {FormArray,FormBuilder,FormGroup,FormControl, Validators, NgForm} from "@angular/forms";
import { ApiService } from '../apis/commonapis';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
userForm : FormGroup;
constructor(private fb : FormBuilder,private service : ApiService) { }
ngOnInit() {
this.newForm();
}
newForm = function(){
this.userForm = this.fb.group({
email : ['',Validators.compose([Validators.required])],
photo : ['',Validators.compose([Validators.required])]
})
}
PostData(form: NgForm) {
//console.log(form);
var formData = new FormData();
formData.append('photo', this.userForm.get('photo').value);
console.log(formData);
/*this.service.PostApi("http://localhost:1900/addUser",formData).subscribe(res=>{
console.log(res);
location.reload();
});
*/
}
onFileSelect(event) { // here is some error
if (event.target.files.length > 0) {
const file = event.target.files[0];
this.userForm.get('photo').setValue(file);
}
}
}
模板文件
<form [formGroup]="userForm" (ngSubmit)="PostData(userForm)" enctype="multipart/form-data">
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-9">
<input type="text" formControlName='email' class="form-control" required>
</div>
</div>
<div class="form-group row">
<label for="photo" class="col-sm-2 col-form-label">Photo</label>
<div class="col-sm-9">
<input type="file" formControlName='photo' class="form-control" required (change)="onFileSelect($event)">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<input type="submit" value='submit' class="form-control">
</div>
</div>
</form>
我已经搜索了上述错误,并且说此错误是在未加载DOM但此处元素已经加载的情况下出现的,而不是为什么出现此错误的原因?
I have searched for above error and it says this error comes when DOM is not loaded but here element is already loaded than why this error?
推荐答案
该错误很奇怪. 当我测试您的代码时,收到以下错误:
That error is strange. When I tested your code I received the following error:
错误:无法在'HTMLInputElement'上设置'value'属性:此输入元素接受文件名,该文件名只能以编程方式设置为空字符串.
Error: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
只需在您的HTML模板中删除formControlName='photo'
即可.
Just delete formControlName='photo'
in your HTML template and should work.
编辑
要显示错误,必须使用不同于常规输入的方法.文件输入没有ng-touched,ng-untouched或ng-dirty类,因此您不能执行以下操作:
For displaying errors, you have to use a different approach than for regular inputs. File input doesn't have ng-touched, ng-untouched or ng-dirty classes, so you can't do something like:
<p *ngIf="photo.invalid && (photo.dirty || photo.touched)"> Show an error </p>
我想您想在用户点击提交"按钮时显示输入文件的错误. 如果是这样,您可以执行以下操作:
I suppose you want to display the error for the file input when the user hits the submit button. If so, you can do something like:
// add a property to your class
isPhotoError = false;
PostData(form: NgForm) {
if (this.userForm.get('photo').invalid) {
this.isPhotoError = true;
}
//do something
}
photoErrorHandler() {
if (this.userForm.get('photo').hasError('required')) {
return 'Photo required';
}
}
<p *ngIf="isPhotoError"> {{ photoErrorHandler() }} </p>
考虑将您的onFileSelect(event)
替换为:
onFileSelect(event: Event) {
const file = (event.target as HTMLInputElement).files[0];
this.userForm.patchValue({ photo: file });
this.userForm.get('photo').updateValueAndValidity();
}
patchValue->允许您定位单个控件;
patchValue -> allows you to target a single control;
updateValueAndValidity()->通知Angular值已更改,它必须检查该值是否有效.
updateValueAndValidity() -> informs Angular that the value has been changed and it has to check if the value is valid or not.
我已经创建了这个 StackBlitz 来检查代码(对样式感到抱歉).如果您的项目中需要一个图像预览,那么我会提供一个图像预览.
I have created this StackBlitz to check the code (sorry about the styles). I have included an image preview if you need one in your project.
这篇关于Angular 8反应式表单文件上载错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!