模态和输入类型文件角

Question

我为个人项目（社交网络）工作。用户可以创建，修改ET删除帖子，他们可以评论我

在Angular上工作的

每篇文章，我有一个显示帖子的后列表组件。 我创建一个打开模态以显示表单以

    displayForm() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = true;
    dialogConfig.width = "600px";
    dialogConfig.maxWidth = "80%";
    this.dialog.open(FormPostComponent, dialogConfig);
}

在FormPostComponent的html上创建帖子的finction，如果用户要上传图像，我有一个输入类型文件，

<div>
    <label for="file" class="label-file " id="label">Ou choisir une image</label>
    <input
        #fileinput
        type="file"
        class="input-file"
        id="file"
        formControlName="file"
        (change)="addFile($event)"
    />
</div>
   

问题是我无法访问该文件，文件，文件似乎是由模式背后的另一个输入来检索的。

我在我的ModalCompononent中找到了一个带有设置的解决方案：endapsulation：viewScapsulation.shadowdom，但我不认为这是解决方案，因为所有浏览器不支持Shadowdom

@Component({
selector: "app-form-post",
templateUrl: "./form-post.component.html",
styleUrls: ["./form-post.component.scss"],
encapsulation: ViewEncapsulation.ShadowDom,

}）

输入更改的路径

谢谢您

Answer 1

它嵌套在目标元素属性中。

addFile(event: any) {
    const files: File[] = event.target.files;
}

这是更干净的。直接传递输入元素：

<input #fileinput
(change)="addFile(this.fileinput)"
...

并检索它：

addFile(input: HTMLInputElement) {
    const files: FileList | null = input.files;
}