html - 刷新输入类型文件

Question

我正在开发一个 Angular 项目。

当我导入多个文档时，出现“两个文档”消息。没什么问题。

当我按下我创建的删除按钮时，问题就出现了。 它允许清空我的列表，但显示总是写有“两个文档”

我希望我有这个。就像我们第一次访问该页面时一样(“未选择文件”):

如何在不重新加载页面的情况下重新加载此输入？

我的代码:

html:

<div class="form-group">
          <label for="pj">Pièce jointe</label>
          <div fxLayout="row wrap" fxLayoutAlign="start center">
            <input type="file" name="pj" id="pj" (change)="onFileChange($event)" multiple>
            <button type="button" (click)="clearFile()" class="btn btn-link">
              <i class="fas fa-trash fa-lg"></i>
            </button>
          </div>
        </div>

ts:

 clearFile() {
 this.message.files = null;
 }

谢谢

Answer 1

如果您使用响应式表单，则只需在表单控件上调用 reset() 即可。

组件.html

<form [formGroup]="form">  
  <input type="file" multiple formControlName="files" />
  <button type="button" (click)="clearFile()">
    Delete
  </button>
</form>

组件.ts

form: FormGroup;

ngOnInit() {
  this.form = new FormGroup({
    files: new FormControl('')
  });
}

clearFile() {
  this.form.get('files').reset();
}

演示:https://stackblitz.com/edit/angular-huvm38