Angular привязка к выбору поля ввода файла? - PullRequest
Новая
       60

Angular привязка к выбору поля ввода файла?

1 голос
/ 20 января 2020

У меня есть простая форма загрузки, и я хотел бы привязать отображаемое имя файла к значению поля ввода файла <input type="file">, но по какой-то причине он всегда показывает некоторый виртуальный путь к файлу. Как можно улучшить привязку, чтобы не иметь такого поведения (только имя файла, например selected.files[0].name)?

В идеале выбранное имя файла должно отображаться в метке для #selected сразу после завершения выбора файлов ОС. Другой мой подход включен в комментарии (*ngIf), но он также не работает. 

<form>
    <div class="justify-content-center">
        <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Select image</span>
      </div>
            <div class="custom-file">
                <input type="file" accept="image/*" class="custom-file-input" id="selected" #selected (click)="message=''" >
        <label class="custom-file-label" for="selected">{{ selected.value }}</label>
<!--
        <div *ngIf="selected.files[0].name; then showFilename else showDefaultMsg"></div>
        <ng-template #showFilename>
        <label class="custom-file-label" for="selected">{{ selected.files[0].name }}</label>
        </ng-template>
        <ng-template #showDefaultMsg>
          <label class="custom-file-label" for="selected">Choose file....</label>
        </ng-template>
-->
            </div>
        </div>
    <button [disabled]="!selected.value" id="uploadBtn" class="btn btn-primary" (click)="onUpload(selected)">Upload</button>
        <div class="text-center" *ngIf="message">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading....</span>
            </div>
            <div>{{ message }}</div>
        </div>
    </div>
</form>

Спасибо

1 Ответ

1 голос
/ 20 января 2020

Я не верю, что вы можете ссылаться на это значение и получать изменения. selected - это HTMLInputElement, а не Observable<HTMLInputElement> или любая другая вещь, которая будет выдавать значение при изменении.

В следующем примере вы увидите, что та же самая установка с текстом окно показывает, что вы ожидаете при загрузке страницы, но на самом деле не фиксирует никаких изменений входного значения.

StackBlitz здесь

Вам нужно либо использовать ngModel, FormControl или просто создайте событие для события change. 

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  fileName = null;

  onFileChange(evt): void {
    this.fileName = evt.target.files[0].name;
  }
}

Шаблон 

<hello name="{{ name }}"></hello>
<input type="text" #myInput value="Init Text" />
<div>Input Text: {{myInput.value}}</div>
<input type="file" (change)="onFileChange($event)" />
<div>name: {{fileName}}</div>
...