如何将 PrimeNG 文件上传组件绑定到我的 Angular 表单控件？答案

【问题标题】：How do I bind a PrimeNG file upload component to my Angular form control?如何将 PrimeNG 文件上传组件绑定到我的 Angular 表单控件？
【发布时间】：2022-08-19 02:20:51
【问题描述】：

我正在使用带有 PrimeNG 的 Angular 13。我有这个文件上传组件

<form [formGroup]=\"form\" >
...
    <p-fileUpload [customUpload]=\"true\" (uploadHandler)=\"uploadFile($event)\" [multiple]=\"false\" formControlName=\"myFile\"></p-fileUpload>

如何将此绑定到我的表单的表单控件？我的服务文件中有这个

  form: FormGroup;
  ...
   this.form = this.fb.group({
    ...
    myFile: [null],
  });


    save(){
    ...
      const formData = new FormData();
      const myObject = this.form.value;
    ...
      console.log(\"file:\" + myObject.myFile);

但即使我上传文件，我也会反复看到 \"file: null\" 输出，并且没有文件绑定到我的表单控件。将我的 p-fileupload 值绑定到表单控件的正确方法是什么？

我怀疑您在使用这种方法的控制台中也有一些与值访问器相关的错误。我设法使用模板驱动的方法使某些东西起作用。检查这个 stackblitz 实例：stackblitz.com/edit/…
谢谢。是的，我也可以走这条路。但我真的很想知道如何连接我的表单对象以自动继承上传到该 p-fileupload 组件的值，而无需我进行干预。

标签： angular file-upload primeng angular13 form-control

【解决方案1】：

尝试这个

<form [formGroup]="form" >
...
    <p-fileUpload [customUpload]="true" name="file-upload" (uploadHandler)="uploadFile($event)" [multiple]="false" formControlName="myFile"></p-fileUpload>

你的表单组应该是

 form: FormGroup = new FormGroup({});
  ...
   this.form = this.fb.group({
    ...
    myFile: new FormControl(''),
  });


    save(){
    ...
      const myObject = this.form.value;
    ...
      console.log("file:", myObject.myFile)  // do not use + operator, because it converts object to string as [Object Object] and it causes the confusion.

希望这可以帮助：）

【讨论】：

我试过这个，但没有用。

【解决方案2】：

您可以尝试不为图像设置 FormControlName。相反，您可以使用new FormControl，例如：

<form [formGroup]="secondFormGroup">
  <p-fileUpload
    #fileUpload
    [customUpload]="true"
    (uploadHandler)="uploadFile($event)"
  ></p-fileUpload>
</form>

<button (click)="save()">save</button>

在您的 .ts 文件中：

export class AppComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.form = this.fb.group({
      myFile: new FormControl(),
    });
  }
  uploadFile(event) {
    for (let file of event.files) {
      t[enter link description here][1]his.form.patchValue({ myFile: file });
      this.form.get('myFile').updateValueAndValidity();
    }
  }
  save(){
    console.log(this.form.value.myFile)
  }
}

并且您可以获得文件值。

演示：stackblitz 您可能会在stackblitz 控制台中看到错误。但是你不会在你的IDE 中得到错误尝试一次。

【讨论】：