清除角度选择字段

Question

如何分别清除这些字段？

<div class="form-group">
    <label for="lrcfile">Lyrics file (.lrc)</label>
    <input type="file" class="form-control-file" id="lrcfile" accept=".lrc" (change)="setLrcFile($event)" >
</div>
<div class="form-group">
    <label for="pitchfile">Pitches file (.txt)</label>
    <input type="file" class="form-control-file" id="pitchfile" accept=".txt" (change)="setPitchfile($event)">
</div>

lrcfile: any;
pitchfile: any;

设置文件：

setPitchfile(fileInput: any) {
    for (var i =  fileInput.target.files.length - 1; i >= 0; i--) {
         var file = fileInput.target.files[i];
         this.pitchfile = file;
    }
}

像大多数来源所建议的那样将它们设置为' '或null并没有任何作用。

this.pitchfile = null;

它仍然显示像在那儿一样。在这张照片中，您可以看到我之前选择的lrc文件保持原样，并且我没有对txt文件进行任何更改只是为了显示它的外观。

编辑

我确实设法清除了它，但是清除了太多。.这样我可以清除我所有的<input>字段，但是我只想要带有type = "file"的字段。

在我的HTML中，我还有其他<input>'s。

<div class="form-group">
  <label for="durationText">Song Duration (ms)</label>
  <input type="text" class="form-control" [(ngModel)]="durationText" id="durationText" placeholder="Song Duration">
</div>

不是type = "file"。我设法用jquery清除了它们。

jQuery('#addNewSongDialog').find("input,textarea,select")
        .val('')
        .end()

也许有一种方法可以只清除type = "file"个字段吗？

Answer 1

好的，这是一些对我有用的代码：

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

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>
  <div class="form-group">
    <label for="lrcfile">Lyrics file (.lrc)</label>
    <input type="file" class="form-control-file" id="lrcfile" accept=".lrc" (change)="setLrcFile($event)" >
</div>
<div class="form-group">
    <label for="pitchfile">Pitches file (.txt)</label>
    <input type="file" class="form-control-file" id="pitchfile" accept=".txt" #file (change)="setPitchfile($event)">
</div>
<button (click)="clear(file)">Clear Pitches</button>
`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  @Input() name: string;
  pitchfile = '';

  constructor() {
  }

  clear(file) {
    file.value = '';
  }

  setPitchfile(fileInput: any) {
    for (var i = fileInput.target.files.length - 1; i >= 0; i--) {
      var file = fileInput.target.files[i];
      this.pitchfile = file;
    }
  }
}

相关的堆叠闪电战在这里：https://stackblitz.com/edit/angular-swrvew

在这一行：

    <input type="file" class="form-control-file" 
           id="pitchfile" accept=".txt" 
           #file (change)="setPitchfile($event)">

我添加了一个模板引用变量（#file），该变量提供了对该控件的引用。

在“清除”按钮上，将其传递给clear方法。然后，我使用控件的value属性清除文本。

有帮助吗？