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

Question

我将Angular 13与PrimeNG一起使用。我有这个文件上传组件

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

但是即使当我上传文件时；文件：null"；输出，并且没有文件绑定到我的表单控件。将p-fileupload值绑定到表单控件的正确方法是什么？

Answer 1

发生错误是因为您设置了方法save()来获取console.log。当您使用customUpload并希望通过单击按钮来获取文件时，您可以从angular使用@ViewChild方法。查看代码，您将了解这是如何工作的。

首先给你的fileUpload一个类似#fileUpload的id，你不需要在这里设置formControlName。相反，您可以在formBuilder group中设置new FormControl。

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

那么在.ts文件中，您必须导入@ViewChild方法并查看FileUpload。在uploadFile事件中，我们可以获取文件，并使用patchValue方法设置表单字段的值。

export class AppComponent implements OnInit {
@ViewChild('fileUpload') fileUpload: FileUpload;
form: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
myFile: new FormControl(),
});
}
uploadFile(event) {
for (let file of event.files) {
this.form.patchValue({ myFile: file });
this.form.get('myFile').updateValueAndValidity();
}
}
save(){
this.fileUpload.upload();
console.log(this.form.value.myFile)
}
}

演示：stackblitz

Answer 2

您可以创建一个自定义ControlValueAccessor指令，以便将上载的文件自动绑定到表单控件。模板：

<p-fileUpload formControlName="abcFile"></p-fileUpload>

指令：

import { Directive, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { FileUpload } from 'primeng/fileupload';
@Directive({
selector: 'p-fileUpload[formControlName], p-fileUpload[formControl]',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FileUploadControlValueAccessorDirective),
multi: true,
},
],
})
export class FileUploadControlValueAccessorDirective
implements ControlValueAccessor
{
constructor(private fileUpload: FileUpload) {}
writeValue(value: any): void {
// update the model and changes logic goes here
}
registerOnChange(fn: any): void {
// notify the outside world about changes (when the user interacts with the input)
this.fileUpload.onUpload.subscribe(fn);
}
registerOnTouched(fn: any): void {
// here goes the touch logic
this.fileUpload.onClear.subscribe(fn);
}
setDisabledState(isDisabled: boolean) {
this.fileUpload.disabled = isDisabled;
}
}

Stacklitz在这里

Answer 3

试试这个

<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.

希望这有帮助：)