(change) vs [(ngModel)] 與 Angular 中的輸入類型文件

Question

我是 Angular 的新手，並且對 (change) 事件和 (ngModel) 感到困惑。 它們都用於跟蹤表單的狀態嗎？ 我可以使用 ngModel 作為（更改）還是哪個更好？ 問題是當我有一個輸入類型=“文件”的表單時。

當我使用 (ngModel) <input type="file" [(ngModel)]="link" name="link"/>並通過this.link獲取值this.link 。 在后端，它返回一個空對象 {}。

但是當我使用 (change) <input type="file" name="link" (change)="fileUploadChange($event)"/>並使用函數獲取文件時

fileUploadChange(event){ this.link = event.target.files[0]; }

在后端，它根據需要返回文件路徑。 {鏈接：{路徑：“C：//...”}}

那么我可以以任何方式將 (ngModel) 用於 input type="file" 嗎？

Answer 1

• [(ngModel)] vs (change):

• [（ngModel）]：

  我們需要在要使用 ngModel 的模塊中導入 formsModule。 ngModel 用於方式綁定。 它會繼續跟蹤您的每個輸入。 ngModel 不是 formControlName 也不是按角度的 formControl。

• （改變）：

  僅當值從其先前狀態更改時才調用 On change 事件。 在 on change 事件中，我們需要傳遞事件並需要從事件中獲取值。 event.target.value .目標.值。

  [(ngModel)] 和 (change) 事件，輸入類型 = "file" 。

  如果我們在文件輸入中使用 ngModel，我們只會得到假路徑，比如。 C:\\fakepath\\Screenshot from 2019-12-13 15-03-17.png

  如果我們將它與 change 事件一起使用：

  html

  <input type="file" (change)="uploadFile($event)">

  ts

  uploadFile(event){ this.file1 = event.target.value; this.file2 = event.target.files[0]; console.log(this.file1) // in this case we only get fakepath same as we get in ngModel. console.table(this.file2) // in this case we get object with data like, name, lastModified, lastModifiedDate, size and type. }

  我個人認為更改事件更適合與輸入類型文件一起使用。

Answer 2

為了回答您關於哪個更好的問題，多年來 Angular 的趨勢是遠離 ngModel 和雙向綁定（目前使用 ngModel 完成）。 我記得聽說 Angular 團隊認為雙向綁定是一個錯誤，AngularJS 中不應該存在。 這是 AngularJS 中屬性的默認行為，一旦 Angular 2 出現，它只能通過 ngModel 實現。 總而言之，您使用 (change) 的方法比 ngModel 更好，並且更符合當前推薦的方法。