我正在開發(fā)一個(gè) Angular 項(xiàng)目。當(dāng)我導(dǎo)入多個(gè)文檔時(shí)，我收到“兩個(gè)文檔”消息。沒什么問題。當(dāng)我按下我創(chuàng)建的刪除按鈕時(shí)，問題就出現(xiàn)了。它允許清空我的列表，但顯示總是寫有“兩個(gè)文檔”我希望我有那個(gè)。就像我們第一次訪問該頁面時(shí)一樣（“未選擇文件”）：我怎樣才能在不重新加載頁面的情況下重新加載此輸入？我的代碼：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貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超13個(gè)贊
如果您使用反應(yīng)式表單，則只需調(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
三國(guó)紛爭(zhēng)
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超7個(gè)贊
您可以使用它ViewChild來訪問組件中的輸入。首先，您需要添加#someValue到輸入中，以便可以在組件中讀取它：
<input #myInput type="file" name="pj" id="pj" (change)="onFileChange($event)" multiple>
然后在您的組件中，您需要ViewChild從以下位置導(dǎo)入@angular/core：
import { ViewChild } from '@angular/core';
然后您可以使用ViewChild模板訪問輸入：
// ng 8 @ViewChild('myInput', {static: false}) myInput: ElementRef;
@ViewChild('myInput') myInput: ElementRef;
現(xiàn)在您可以使用myInput來重置所選文件，因?yàn)樗菍?duì)輸入的引用#myInput，例如reset()將在click按鈕事件時(shí)調(diào)用的創(chuàng)建方法：
reset() {
console.log(this.myInput.nativeElement.files);
this.myInput.nativeElement.value = "";
console.log(this.myInput.nativeElement.files);
}
- 2 回答
- 0 關(guān)注
- 125 瀏覽
添加回答
舉報(bào)
0/150
提交
取消