Angular 绑定到文件输入字段的选择？

Question

我有一个简单的上传表单，想将显示的文件名绑定到文件输入字段的值 <input type="file">，但由于某种原因，它总是显示一些虚拟文件路径。如何改进绑定以使其不具有此行为（仅文件名，如 selected.files[0].name）？

理想情况下，所选文件名将在 OS 文件选择器完成后立即显示在 #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

我不相信您可以像那样引用该值并进行更改。 selected 是一个 HTMLInputElement，而不是 Observable<HTMLInputElement> 或任何其他将在更改时发出值的东西。

在下面的示例中，您会看到带有文本框的相同设置显示了您在页面加载时所期望的内容，但实际上并没有对输入值进行任何更改。

StackBlitz here

您需要使用 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>

Angular 绑定到文件输入字段的选择？

Angular binding to selection of file input field?

html

data-binding

input-field

angular-directive

angular