使用reactiveForms和FileUpload组件角度上传文件

Question

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

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

有什么建议吗？

谢谢，建议！！

Answer 1

首先创建您的表单组（反应式表单）

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};
}

是的，就是这样！您也可以使用验证器。一切都像正常的 FormControls 一样。

Answer 2

从上面的回答 onImagePicked（事件：事件）{ const file = (event.target as HTMLInputElement).files[0]; // 这里我们只使用第一个文件（单个文件） this.form.patchValue({ 图片: 文件}; }