刷新输入类型文件

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

Answer 2

您可以使用它ViewChild来访问组件中的输入。首先，您需要添加#someValue到输入中，以便可以在组件中读取它：

<input  #myInput type="file" name="pj" id="pj" (change)="onFileChange($event)" multiple>

然后在您的组件中，您需要ViewChild从以下位置导入@angular/core：

import { ViewChild } from '@angular/core';

然后您可以使用ViewChild模板访问输入：

// ng 8 @ViewChild('myInput', {static: false}) myInput: ElementRef;

@ViewChild('myInput') myInput: ElementRef;

现在您可以使用myInput来重置所选文件，因为它是对输入的引用#myInput，例如reset()将在click按钮事件时调用的创建方法：

reset() {

    console.log(this.myInput.nativeElement.files);

    this.myInput.nativeElement.value = "";

    console.log(this.myInput.nativeElement.files);

}