Refre sh тип входного файла

Question

Я работаю над проектом Angular.

Когда я импортирую несколько документов, у меня появляется сообщение "два документа". ничего проблематичного c.

Проблема возникает, когда я нажимаю созданную мной кнопку удаления. Это позволяет очистить мой список, но для отображения всегда есть «два документа»

У меня будет sh У меня было это. например, когда мы попадаем на страницу в первый раз («файл не выбран»):

Как я могу перезагрузить этот ввод без перезагрузки страницы?

Мой код:

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() в элемент управления формы.

component. html

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

component.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

Я уже пытался сделать это, но это не работает ...

 <div class="form-group">
          <label for="pj">Pièce jointe</label>
          <div fxLayout="row wrap" fxLayoutAlign="start center">
            <input #inputFile 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>

  @ViewChild('inputFile') myInputVariable: ElementRef;

clearFile() {
    //this.message.files = null;
    console.log(this.myInputVariable.nativeElement.files);
    this.myInputVariable.nativeElement.value = "";
    console.log(this.myInputVariable.nativeElement.files);
  }

Answer 3

вы можете использовать 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);
}