时间戳

首页 > 解决方案 > 如何在两次上传相同文件时正确清除 ngx-material-file-input 以检测更改

angular - 如何在两次上传相同文件时正确清除 ngx-material-file-input 以检测更改

问题描述

我正在使用 Angular Material 6.4.7 和merlosy/ngx-material-file-input版本 0.3.1。在我的一个页面中，我有一个 ngx-mat-file-input。每次选择一个文件时，我都会对文件做一些事情，然后我重置输入。为此，我订阅了与输入关联的控件的 valueChange 事件。问题是，如果同一文件连续上传两次，则 valueChange 事件不会在 Chrome 和 Explorer/Edge 中触发（它在 Firefox 中会触发）。

我尝试使用以下方法重置输入值：

this.form.control['file'].reset();
this.form.control['file'].setValue(null);
this.form.control['file'].setValue('');
this.form.control['file'].setValue([]);

在处理文件后的 valueChange 事件中，但 Chrome 和 Explorer 仍然没有检测到更改。

这是我的打字稿文件的片段：

this.form = this.fb.group({
  file: []
})

this.form.controls['file'].valueChanges.subscribe(
  file => {
    if (file != null && typeof file != undefined && file != '') {
      alert('changed!');
      this.form.controls['file'].reset();
    }
  }
)

你可以在这个stackblitz中看到它是如何工作的

标签： angularangular-material

解决方案

好的，我想我已经找到了适用于所有浏览器的解决方案。我只需要获取<input>生成的元素并重置它的值：

this.form = this.fb.group({
  file: []
})

this.form.controls['file'].valueChanges.subscribe(
  file => {
    if (file != null && typeof file != undefined) {
      alert('changed!');
      this.form.controls['file'].setValue(null, { emitEvent: false });
      const fileInput = <HTMLInputElement>document.querySelector('ngx-mat-file-input[formcontrolname="file"] input[type="file"]');
      fileInput.value = null;
    }
  }
)

这是工作中的stackblitz

推荐阅读