Вы можете использовать ViewChild
для доступа к вводу в вашем компоненте. Во-первых, вам нужно добавить #someValue
к своему вводу, чтобы вы могли прочитать его в компоненте:
<input #myInput type="file" placeholder="File Name" name="filename" (change)="onChange($event)">
Затем в вашем компоненте вам нужно импортировать ViewChild
из @angular/core
:
import { ViewChild } from '@angular/core';
Затем вы используете ViewChild
для доступа к вводу из шаблона:
@ViewChild('myInput')
myInputVariable: ElementRef;
Теперь вы можете использовать myInputVariable
для сброса выбранного файла, потому что это ссылка для ввода #myInput
, например метод create, reset()
который будет вызываться при click
событии вашей кнопки:
reset() {
console.log(this.myInputVariable.nativeElement.files);
this.myInputVariable.nativeElement.value = "";
console.log(this.myInputVariable.nativeElement.files);
}
Первый console.log
напечатает выбранный вами файл, второй console.log
напечатает пустой массив, потому что this.myInputVariable.nativeElement.value = "";
удаляет выбранный файл (ы) из ввода. Мы должны использовать this.myInputVariable.nativeElement.value = "";
для сброса значения ввода, потому что FileList
атрибут input доступен только для чтения , поэтому невозможно просто удалить элемент из массива. Вот рабочий Plunker .