Angular Formly添加file类型字段报错，求解决方法

问题分析 #

控制台报错ERROR Error: [Formly Error] The type "file" could not be found，核心原因是Angular Formly没有内置file类型的字段组件，必须自定义该类型并注册到Formly模块中才能使用。

解决方案步骤 #

1. 创建自定义File字段组件 #

新建formly-file.component.ts组件，基于Angular Material样式实现文件选择功能：

import { Component } from '@angular/core';
import { FieldType, FieldTypeConfig } from '@ngx-formly/core';

@Component({
  selector: 'formly-file-type',
  template: `
    <mat-form-field appearance="fill" class="w-full">
      <mat-label>{{ to.label }}</mat-label>
      <input 
        matInput 
        type="file" 
        [accept]="to.accept"
        [required]="to.required"
        (change)="onFileChange($event)"
      >
      <mat-error *ngIf="showError">{{ errorMessage }}</mat-error>
    </mat-form-field>
  `,
})
export class FormlyFileTypeComponent extends FieldType<FieldTypeConfig> {
  onFileChange(event: Event) {
    const fileInput = event.target as HTMLInputElement;
    if (fileInput.files?.length) {
      // 将选中文件赋值给表单控件
      this.formControl.setValue(fileInput.files[0]);
    }
  }
}

2. 在模块中注册自定义字段类型 #

在表单所在的功能模块（或根模块）中，将自定义组件注册到FormlyModule：

import { NgModule } from '@angular/core';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyMaterialModule } from '@ngx-formly/material';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { FormlyFileTypeComponent } from './formly-file.component';

@NgModule({
  declarations: [FormlyFileTypeComponent],
  imports: [
    MatFormFieldModule,
    MatInputModule,
    FormlyMaterialModule,
    FormlyModule.forRoot({
      types: [
        { name: 'file', component: FormlyFileTypeComponent },
      ],
    }),
  ],
})
export class YourFeatureModule { }

3. 保留原有表单字段配置 #

你的字段配置无需大幅修改，保持type: 'file'即可，组件会自动读取templateOptions中的参数：

{
  type: 'file',
  key: 'image',
  templateOptions: {
    label: 'Imagem do animal',
    accept: 'image/*',
    required: true,
  },
}

4. 表单提交时处理文件 #

提交表单时，form.value.image会返回选中的File对象，可直接用于FormData上传：

onSubmit(formValue: any) {
  const formData = new FormData();
  formData.append('image', formValue.image);
  // 追加其他表单字段
  formData.append('name', formValue.name);
  formData.append('animalType', formValue.animalType);
  // 调用上传接口
}

注意事项 #

• 必须确保已导入Angular Material的MatFormFieldModule和MatInputModule，否则自定义组件会样式报错。
• File输入控件的value为只读属性，必须通过(change)事件手动获取文件并绑定到表单控件。

内容的提问来源于stack exchange，提问作者Paulo Antonio Galleazzo