Angular FormGroup验证输入文件上传

Question

我对文件上传的表单输入验证有问题。当文件上传为空时，我如何验证formcontrol输入。我如何在selectFile中设置值，以便当文件输入为空时，我从服务器响应中获得的验证消息将显示。

我得到响应消息从服务器的其他字段名称和家庭名称，这是因为我使用Html内的formControlName，这工作得很好。但是我不能在文件上传的输入字段内使用formControlName属性。

我如何获得验证响应消息的文件输入字段没有使用formControlname?

<input type="text" placeholder="Name" formControlName="name" class="form-control" matInput />
<span *ngIf="inputErrorMessage?.name">{{inputErrorMessage.name}}</span>

<input accept="*" type="file" (change)="selectFile($event)">
<span *ngIf="inputErrorMessage?.file1">{{inputErrorMessage.file1}}</span>

component.ts代码

constructor(private uploadService: FileuploadService) {
this.form = new FormGroup({
name: new FormControl('' , Validators.required),
familyName: new FormControl('' , Validators.required),
file1: new FormControl('' , Validators.required),
file2: new FormControl('' , Validators.required),
});
}
selectFile(event): void {
const file = event.target.files[0];
this.form.patchValue({
file1: file,
file2: file
});
}
onSubmit(): void {
const formData: any = new FormData();
formData.append('name', this.form.get('name').value);
formData.append('familyName', this.form.get('familyName').value);
formData.append('file1', this.form.get('file1').value);
formData.append('file2', this.form.get('file2').value);
this.uploadService.uploadFiles(formData).subscribe( data => {
this.successMessage = data.message;
},
err => {
console.log(err);
this.inputErrorMessage = err.error.error;
console.log('Errors', this.inputErrorMessage);
this.errorMessage = err.error.message;
console.log('Message', this.errorMessage);
}
);
}

uploadService.ts

uploadFiles(formData): Observable<any> {
return this.http.post(this.urlResume, formData);
}

我已经尝试了一些类似的例子，但没有成功:

使用

Answer 1

我已经通过使用api解决了我的问题

https://www.npmjs.com/package/ngx-material-file-input

对于感兴趣的人，最终解决方案:

<ngx-mat-file-input formControlName="applicationLetter"
(change)="selectFile2(form.value)" required></ngx-mat-file-input>