Angular13+DevExtreme21.2.5：dx-data-grid内文件上传控件失效问题

问题原因 #

DevExtreme的dx-data-grid在表单编辑模式下，会对内部表单元素做封装和事件拦截，直接放置原生<input type="file">时，Angular的(change)事件无法被正确触发——网格的编辑机制接管了控件上下文，导致事件绑定失效。

解决方案：使用自定义模板编辑器 #

通过DevExtreme的dxTemplate包裹原生控件，确保事件能正确绑定到组件方法，同时适配网格的编辑环境。

修改后的HTML代码 #

<div id="data-grid-demo">
  <dx-data-grid
    id="gridContainer"
    [dataSource]="employees"
    keyExpr="ID"
    [showBorders]="true"
  >
    <dxo-paging [enabled]="false"></dxo-paging>
    <dxo-editing
      mode="form"
      [allowUpdating]="true"
      [allowAdding]="true"
      [allowDeleting]="true"
    >
    </dxo-editing>
    <dxi-column dataField="Prefix" caption="Title" [width]="70"></dxi-column>
    <dxi-column dataField="FirstName"></dxi-column>
    <dxi-column dataField="LastName"></dxi-column>
    <dxi-column dataField="Position" [width]="170"></dxi-column>
    <dxi-column dataField="StateID" caption="State" [width]="125">
      <dxo-lookup [dataSource]="states" displayExpr="Name" valueExpr="ID">
      </dxo-lookup>
    </dxi-column>
    <dxi-column dataField="BirthDate" dataType="date"> </dxi-column>
    <dxi-column dataField="Notes" [visible]="false">
      <dxo-form-item
        [colSpan]="2"
        editorType="dxTextArea"
        [editorOptions]="{ height: 100 }"
      >
      </dxo-form-item>
    </dxi-column>
    <!-- 修改后的文件上传列 -->
    <dxi-column caption="文件上传">
      <dxo-form-item>
        <div *dxTemplate>
          <input type="file" (change)="onFileSelected($event)" accept="image/*" />
        </div>
      </dxo-form-item>
    </dxi-column>
    
  </dx-data-grid>
</div>

注：将dataSource绑定到实际数据源employees，避免因空数据源导致编辑表单无法渲染

修正TypeScript事件处理逻辑 #

原生file控件的文件信息存储在event.target.files中，而非event.value，修正后的方法如下：

onFileSelected(event: Event): void {
  const input = event.target as HTMLInputElement;
  if (input.files && input.files.length > 0) {
    // 存储文件名（如需文件对象可直接保存input.files）
    this.uploadedFiles = Array.from(input.files).map(file => file.name);
    // 可在此添加文件上传逻辑，比如通过FormData提交到后端
    notify(`已选择 ${input.files.length} 个文件`, "success", 2000);
  }
}

额外注意事项 #

• 若需将文件与表单数据一同提交，需在网格的保存事件（如onSaved）中获取已选择的文件，通过FormData格式拼接后发送请求。
• 确保组件中employees数据源正确初始化，网格才能正常加载编辑表单。

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