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

Posted 2023-02-22

【中文标题】角度绑定到文件输入字段的选择？

【英文标题】：Angular binding to selection of file input field?

【发布时间】：2020-05-06 00:22:24

【问题描述】：

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

理想情况下，所选文件名将在操作系统文件选择器完成后立即显示在#selected 的标签中。我的另一种方法包含在 cmets (*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】：

我不相信您可以引用这样的值并进行更改。 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>