(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 更好，并且更符合当前推荐的方法。