（更改）vs [（ngModel）]与Angular中的输入类型文件答案

【问题标题】：(change) vs [(ngModel)] with input type file in Angular（更改）vs [（ngModel）]与Angular中的输入类型文件
【发布时间】：2020-04-18 16:19:36
【问题描述】：

我是 Angular 的新手，对 (change) 事件和 (ngModel) 感到困惑。它们都用于跟踪表单的状态吗？我可以使用 ngModel 作为（更改）还是哪个更好？问题是当我有一个输入类型=“文件”的表单时。

当我使用 (ngModel) <input type="file" [(ngModel)]="link" name="link"/> 并通过 this.link 获取值时。在后端，它返回一个空对象 {}。

但是当我使用（更改）<input type="file" name="link" (change)="fileUploadChange($event)"/> 并使用函数获取文件时

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

在后端，它返回我想要的文件路径。 {链接：{路径：“C://...”}}

那么我可以以任何方式将 (ngModel) 用于输入 type="file" 吗？

【问题讨论】：

不，您不能将 ngModel 与文件输入一起使用。

标签： angular ngmodel

【解决方案1】：

[(ngModel)] 与（更改）：
[(ngModel)]：

我们需要在要使用 ngModel 的模块中导入 formsModule。 ngModel 用于方式绑定。它会继续跟踪您的每个输入。 ngModel 不是 formControlName，也不是 angular 中的 formControl。
（更改）：

只有在值从之前的状态发生变化时才会调用 On change 事件。在更改事件中，我们需要传递事件并需要从事件中获取值。 event.target.value.

[(ngModel)] 和输入类型 = "file" 的 (change) 事件。

如果我们使用带有文件输入的 ngModel，我们只会得到假路径，例如。 C:\fakepath\2019-12-13 15-03-17.png的截图

如果我们将它与更改事件一起使用：

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. }

我个人认为更改事件更适合与输入类型文件一起使用。

【讨论】：

【解决方案2】：

为了回答您关于哪个更好的问题，多年来 Angular 的趋势是远离 ngModel 和双向绑定（目前使用 ngModel 完成）。我记得听说过 Angular 团队认为双向绑定是一个在 AngularJS 中不应该存在的错误。这是 AngularJS 中属性的默认行为，一旦 Angular 2 出现，它只能通过 ngModel 实现。总而言之，你使用（更改）的方法比 ngModel 更好，更符合当前推荐的方法。

【讨论】：