以程式設計方式在檔案輸入中顯示檔案名稱：使用Angular實現

Question

晚安,

我正在使用Angular15開發一個應用程序，其中一個功能是填充一個包含團隊成員資料的表格。

要新增成員，需要點擊一個按鈕，然後顯示一個模態視窗來填寫資料並新增一些檔案。編輯操作也是一樣的。

我已經成功保存了資料並將文件上傳到伺服器資料夾，但是在編輯時我遇到了一個問題：在文件輸入框中，上傳的文件名不顯示，看起來好像沒有上傳任何文件，儘管實際上已經上傳了。

我將文件的名稱儲存在一個成員屬性中，並使用ngModel將檔案輸入框與成員屬性綁定。

輸入框顯示「未選擇檔案」的訊息，如果我嘗試在輸入框上以程式設定檔名（我在.ts檔中使用ViewChild和ElementRef進行控制），我會得到以下錯誤：

core.js:1448 錯誤錯誤：未捕獲（承諾中）：InvalidStateError：無法在「HTMLInputElement」上設定「value」屬性：此輸入元素接受檔名，該檔名只能以程式設計方式設為空字串。錯誤：無法設定「HTMLInputElement」的「value」屬性：此輸入元素接受檔名，該檔名只能以程式設計方式設定為空字串。

我完全理解我不能進行這個操作，因為它涉及到的安全風險，但是我不想以編程方式插入文件，我只想顯示文件名，而不顯示其內容。有沒有辦法實現這個目的？

謝謝。

Answer 1

在web 文件中

const input = document.querySelector("input[type=file]");
input.value = "foo";