Angular使用ngx-mat-file-input获取文件名及解决订阅不触发问题

现有实现背景 #

在Angular项目中引入@angular-material-components/file-input组件时，参照官方示例完成基础配置，目前已实现选中文件后组件输入框正常展示文件的基础能力，但存在两个功能卡点。

原实现代码 #

模板层 #

<mat-form-field>
  <ngx-mat-file-input [formControl]="fileControl"></ngx-mat-file-input>
</mat-form-field>

组件逻辑 #

export class DemoFileInputComponent implements OnInit {
  fileControl: FormControl;

  constructor() {
    this.fileControl = new FormControl(this.files);
  }

  ngOnInit() {
    this.fileControl.valueChanges.subscribe((files: any) => {
      this.files = Array.isArray(files) ? files : [files];
      console.log('valueChanges 触发');
    })
  }
}

核心问题与对应解决方法 #

1. 无法获取文件完整路径 #

浏览器出于安全策略限制，会完全禁止网页脚本读取用户本地文件的完整物理存储路径，该限制覆盖所有文件选择类组件，不存在技术层面的绕过可能。
实际业务开发中不需要依赖完整本地路径，选中的文件会以标准File对象的形式传入表单控件，可直接读取的公开属性包括：

• 文件名称：file.name
• 文件大小：file.size
• 文件MIME类型：file.type
• 文件最后修改时间：file.lastModified

2. valueChanges订阅不触发 #

出现该问题通常由以下几类原因导致，可逐一排查修复：

• 模块导入顺序错误：需在业务模块中先导入ReactiveFormsModule，再导入NgxMatFileInputModule，模块导入顺序错乱会导致表单控件的值变更推送失效
• 类属性声明缺失：原代码中this.files未在类作用域内显式声明类型与初始值，初始化FormControl时传入的初始值为undefined，会破坏控件的值追踪逻辑，需补充显式声明：

  // 类作用域内补充声明
  files: File[] = [];
  

• 订阅时机错位：需确保valueChanges的订阅逻辑在组件ngOnInit生命周期内完成，不要将订阅逻辑绑定在用户操作的回调中，否则会错过初始值变更的推送

正常状态下的文件数据获取逻辑 #

完成上述修复后，可通过订阅逻辑稳定拿到选中的文件对象，直接读取属性即可：

// 订阅回调中获取文件信息
this.fileControl.valueChanges.subscribe((files: FileList | File[]) => {
  const selectedFiles = Array.isArray(files) ? files : Array.from(files);
  // 遍历打印每个文件的名称
  selectedFiles.forEach(file => {
    console.log('选中文件名：', file.name);
  })
})

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