使用reactiveForms和FileUpload组件angular上传文件

Question

我使用primeng作为模板。我正在使用p-fileupload组件，但我需要使用它的反应形式，所以我想知道在哪里把formControlName，因为我没有得到任何输入或一些标签添加。

我只看到它的输入，并在它上面放了一个标识符，但我想知道它是否可能在这个组件上。

有什么建议吗?

谢谢你的建议!!

Answer 1

首先创建formGroup(响应式表单)

this.form = new FormGroup({
title: new FormControl(""),
image: new FormControl(null)
});

image是您的图像组件(上载)。然后在html:

中

<input type="file" #filePicker (change)="onImagePicked($event)">

所以你可以隐藏你的输入并模拟点击它。但是onImagePicked函数很重要。然后回到后面的代码:

onImagePicked(event: Event) {
const file = (event.target as HTMLInputElement).files[0]; // Here we use only the first file (single file)
this.form.patchValue({ image: file});
}

是的，就这些!您也可以使用验证器。