绑定到选择文件输入字段的角度吗？

Question

我有一个简单的上传表单，想将显示的文件名绑定到文件输入字段<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>

谢谢

Answer 1

在下面的示例中，您将看到带有文本框的相同设置显示了页面加载时的预期效果，但实际上并未对输入值进行任何更改。

StackBlitz here

您需要使用ngModel，FormControl，或仅为change事件创建一个事件。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('myInput', { static: false }) myInput;
  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>