Запускать событие onchange в файле типа ввода программно

Question

У меня есть проект, написанный на Angular, и я хочу стилизовать файл входного типа. Итак, в Inte rnet я нашел решение, согласно которому мне нужно скрыть файл входного типа и программно вызвать его событие. Но код ниже не работает:

   <input type="button" id="addImgFile" value="Add file" 
onclick="var addImgFile = document.getElementById('addImgFile'); var event = new Event('change'); addImgFile.dispatchEvent(event);" />
    <input type="file" name="avatar" id="addImgFile" style="display:none;" 
(change)="onFileChange($event)" />

Answer 1

Вместо использования другого input вы можете использовать label, чтобы получить желаемый стиль. Вот пример

Answer 2

<input type="button" id="addImgFile" value="Add file" (click)="onAddFile()" />
<input #file type="file" name="avatar" id="addImgFile" style="display:none;" 
(change)="onFileChange($event)" />

@ViewChild('file', { static: true })
private file: ElementRef;

onAddFile() {
   // manually click the file element
   this.file.nativeElement.value = null;
   this.file.nativeElement.click();
}

Answer 3

В Angular для доступа к элементу следует использовать декторатор свойств ViewChild. Затем вы можете вручную выполнить любой нужный вам метод из файла машинописного текста. Вот базовый пример c: https://stackblitz.com/edit/angular-nfdvsr

Answer 4

Не совсем понятно, чего вы хотите достичь, но если вы просто хотите скрыть поле ввода в начале и показывать его только при нажатии кнопки «добавить файл», вы можете попробовать изменить событие кнопки в соответствии с приведенным ниже кодом.

<input type="button" id="addImgFile" value="Add file" onclick="var addImgFile = document.getElementById('addImgFile1'); var event = new Event('change'); addImgFile.dispatchEvent(event);" />

<input type="file" name="avatar"  id="addImgFile1" style="display:none;" onchange=" event.target.style=''; event.target.click()" />