我正在開發(fā)一個 Angular 項目。當我導入多個文檔時，我收到“兩個文檔”消息。沒什么問題。當我按下我創(chuàng)建的刪除按鈕時，問題就出現(xiàn)了。它允許清空我的列表，但顯示總是寫有“兩個文檔”我希望我有那個。就像我們第一次訪問該頁面時一樣（“未選擇文件”）：我怎樣才能在不重新加載頁面的情況下重新加載此輸入？我的代碼：html：<div class="form-group"> <label for="pj">Pièce jointe</label> <div fxLayout="row wrap" fxLayoutAlign="start center"> <input 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>TS： clearFile() { this.message.files = null; }
2 回答
烙印99
TA貢獻1829條經(jīng)驗 獲得超13個贊
如果您使用反應式表單，則只需調(diào)用reset()表單控件即可。
組件.html
<form [formGroup]="form">
<input type="file" multiple formControlName="files" />
<button type="button" (click)="clearFile()">
Delete
</button>
</form>
組件.ts
form: FormGroup;
ngOnInit() {
this.form = new FormGroup({
files: new FormControl('')
});
}
clearFile() {
this.form.get('files').reset();
}
演示： https: //stackblitz.com/edit/angular-huvm38
三國紛爭
TA貢獻1804條經(jīng)驗 獲得超7個贊
您可以使用它ViewChild來訪問組件中的輸入。首先，您需要添加#someValue到輸入中，以便可以在組件中讀取它：
<input #myInput type="file" name="pj" id="pj" (change)="onFileChange($event)" multiple>
然后在您的組件中，您需要ViewChild從以下位置導入@angular/core：
import { ViewChild } from '@angular/core';
然后您可以使用ViewChild模板訪問輸入：
// ng 8 @ViewChild('myInput', {static: false}) myInput: ElementRef;
@ViewChild('myInput') myInput: ElementRef;
現(xiàn)在您可以使用myInput來重置所選文件，因為它是對輸入的引用#myInput，例如reset()將在click按鈕事件時調(diào)用的創(chuàng)建方法：
reset() {
console.log(this.myInput.nativeElement.files);
this.myInput.nativeElement.value = "";
console.log(this.myInput.nativeElement.files);
}
- 2 回答
- 0 關注
- 117 瀏覽
添加回答
舉報
0/150
提交
取消