模态和输入类型 FILE ANGULAR答案

【问题标题】：Modal And Input Type FILE ANGULAR模态和输入类型 FILE ANGULAR
【发布时间】：2022-06-18 11:48:47
【问题描述】：

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

我在 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 中，如果用户想要上传图片，我有一个输入类型 File

<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 中找到了一个解决方案：封装：ViewEncapsulation.ShadowDom，但我认为这不是解决方案，因为并非所有浏览器都支持 ShadowDom

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

})

输入变化的路径

谢谢

【问题讨论】：

标签： angular file input

【解决方案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;
}

【讨论】：