使用reactiveForms和FileUpload组件上传文件

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

是的，仅此而已！您也可以使用验证器。一切都像普通的 FormControls 一样。