0

我正在尝试创建一个自定义指令来验证多个文件上传。但在自定义指令中，控件只是返回最后一个文件的详细信息而不是数组。

下面是代码：

文件上传.html：

<form [formGroup]="validateDocumentForm">
<input formControlName="document"  style="display: none" type="file" multiple (change)="onFileChanged($event)" #fileInput accept="application/pdf"  class="form-control">
<button class="btn upload-doc-btn" (click)="fileInput.click()"><span><i class="material-icons">vertical_align_top</i> Upload File</span></button>

文件上传.ts

ngOnInit() {
this.validateDocumentForm = this.formBuilder.group({
  document: this.formBuilder.array(['', [
    CustomValidator.uploadDocument
  ]]),
});

}

自定义验证器.ts：

export class CustomValidator {
    static uploadDocument(control: AbstractControl): 
    ValidationErrors | null {
      console.log(control); // only last file's details instead of 
                               array of selected files.
      console.log(control.value);
      return  null;
   }
}
4

2 回答 2

1

关于您是否可以在单独的文件中实现 CustomValidator 的问题，我找到了本教程： https ://dev.to/angular/implement-file-upload-with-firebase-storage-in-our-angular-app-the- simple-way-1ofi

基本上，您将一个方法绑定为保存表单的组件内的验证器，这会在验证文件中调用一个单独的方法。

我希望这个迟到的答案可以帮助某人。

于 2020-10-15T14:43:53.167 回答
0

实际上，您不应该使用 formArray 进行文件上传。如果您使用的是 formArray，则在 html 文件中的循环中进行迭代。( FormArray )

ngOnInit() {
    this.validateDocumentForm = this.formBuilder.group({
        'document':[''] 
    })
})

选定的文件将不可用，value而您必须使用files来自目标的文件。

onFileChanged(event) {
    for (const x of event.target.files) {
        console.log(x);
        // do the validation here
    }
}

尝试在组件文件中而不是在 custom.validator 文件中进行验证

编辑

我们必须将文件存储在表单控件中，以便您可以在组件文件中执行类似的操作

ngOnInit() {
    this.validateDocumentForm = this.formBuilder.group({
        'document':['', uploadDocument] 
    })
})

onFileChanged(event) {
    this.validateDocumentForm['controls']['document']['files'] = event.target.files;
}

在 custom.validators 文件中

export function uploadDocument(c: AbstractControl) {
    console.log(c);
if (c['target'] && 'files' in c['target']) {
    for (const x of c['target'].files) {
        if (/*do your condition*/) {
            return {
                'fileNotValid': true
            };
        }
    }
 }
    return null;
}
于 2019-08-13T12:02:18.630 回答