Angular项目中如何不刷新页面重置file input显示状态

Got it, let's work through this problem. The issue here is that while you're resetting this.message.files to null, you're not updating the actual DOM state of the file input element. Browsers handle the display text of file inputs based on their native value attribute—so just clearing your component's variable won't trigger the browser to revert back to "no file selected".

Here's how to fix it without reloading the page or the component:

Step 1: Add a template reference to your file input #

First, give your file input a template reference variable so you can access it in your component TypeScript code:

<div class="form-group">
  <label for="pj">Pièce jointe</label>
  <div fxLayout="row wrap" fxLayoutAlign="start center">
    <!-- Add #fileInput here -->
    <input #fileInput type="file" name="pj" id="pj" (change)="onFileChange($event)" multiple>
    <button type="button" (click)="clearFile()" class="btn btn-link">
      <i class="fas fa-trash fa-lg"></i>
    </button>
  </div>
</div>

Step 2: Update your component to reset the input's value #

In your TypeScript file, use @ViewChild to get a reference to the input element, then modify your clearFile method to reset the input's value to an empty string (this is the only allowed way to reset a file input due to browser security restrictions):

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

// Replace "YourComponent" with your actual component class name
export class YourComponent {
  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;

  // Your existing properties (like message) and methods (like onFileChange) go here

  clearFile() {
    this.message.files = null;
    // Reset the native input's value to trigger the default display text
    this.fileInput.nativeElement.value = '';
  }
}

Why this works #

When you set the file input's value to an empty string, the browser recognizes that no files are selected anymore and automatically updates the display text back to "no file selected". This is a native browser behavior, so it's reliable and doesn't require reloading any parts of the page.

内容的提问来源于stack exchange，提问作者Nitneuq