Vous pouvez utiliser ViewChild
pour accéder à l'entrée de votre composant. Tout d'abord, vous devez ajouter #someValue
à votre entrée pour pouvoir la lire dans le composant:
<input #myInput type="file" placeholder="File Name" name="filename" (change)="onChange($event)">
Ensuite, dans votre composant, vous devez importer à ViewChild
partir de @angular/core
:
import { ViewChild } from '@angular/core';
Ensuite, vous utilisez ViewChild
pour accéder à l'entrée du modèle:
@ViewChild('myInput')
myInputVariable: ElementRef;
Vous pouvez maintenant utiliser myInputVariable
pour réinitialiser le fichier sélectionné car il s'agit d'une référence à saisir avec #myInput
, par exemple, une méthode de création reset()
qui sera appelée à l' click
événement de votre bouton:
reset() {
console.log(this.myInputVariable.nativeElement.files);
this.myInputVariable.nativeElement.value = "";
console.log(this.myInputVariable.nativeElement.files);
}
Le premier console.log
imprimera le fichier que vous avez sélectionné, le second console.log
imprimera un tableau vide car this.myInputVariable.nativeElement.value = "";
supprime le ou les fichiers sélectionnés de l'entrée. Nous devons utiliser this.myInputVariable.nativeElement.value = "";
pour réinitialiser la valeur de l'entrée car l' FileList
attribut d'entrée est en lecture seule , il est donc impossible de simplement supprimer l'élément du tableau. Voilà Plunker qui travaille .