Angular中使用ngModel绑定file类型input时变量未定义问题

嘿，这个坑我踩过！Angular的双向绑定[(ngModel)]确实没办法直接作用在type="file"的输入控件上，原因很直接——文件输入框的value属性是只读的，而ngModel的双向绑定需要同时支持读写操作，自然就失效了，所以你选中文件后file变量还是undefined。

给你两种标准的解决方式：

方式一：使用change事件（最推荐） #

这是Angular官方文档里更推荐的做法，直接通过监听文件选择事件来获取文件：

模板代码： #

<input type="file" id="fileUpload" (change)="onFileSelected($event)">

组件代码： #

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  file: File | undefined;

  onFileSelected(event: Event) {
    // 把事件目标转换成HTMLInputElement类型，才能访问files属性
    const fileInput = event.target as HTMLInputElement;
    // 检查是否有选中的文件
    if (fileInput.files && fileInput.files.length > 0) {
      this.file = fileInput.files[0];
      console.log('选中的文件：', this.file);
    }
  }
}

方式二：自定义ngModel指令（复杂场景可选） #

如果你的业务场景必须用ngModel绑定，也可以自定义一个指令来扩展ngModel的功能，不过一般没必要，上面的change事件方案已经足够简洁。

简单说下原理：自定义指令实现ControlValueAccessor接口，接管文件输入框的取值和赋值逻辑，让ngModel能正确和它交互。不过这种方式适合需要复用的复杂场景，日常开发用第一种方式就够了。

总结一下，别再纠结用ngModel绑file输入框啦，用change事件直接拿文件才是Angular里的标准操作～

内容的提问来源于stack exchange，提问作者Leonzen