Add input file field to FormlyFieldConfig

[Galleazzo]

I'm building a form in my project and I have to add an image selection field, that is, an input field of type file. I searched a few places on the internet and couldn't find my solution. Has anyone faced the same problem as me helping me?

I'm going to make my form's config available here, but the part I want to add I put a very visible comment in the body.

One thing I left out is that the following error appears in the browser console:

ERROR Error: [Formly Error] The type "file" could not be found. Please make sure that it is registered through the FormlyModule declaration.

I would really like to thank anyone who can help me with this problem❤

OBS: Im using ng-matero template

fields: FormlyFieldConfig[] = [
    {
      fieldGroupClassName: 'row',
      fieldGroup: [
        {
          className: 'col-sm-6',
          type: 'input',
          key: 'name',
          templateOptions: {
            label: 'Nome',
            required: true,
          },
        },
        {
          className: 'col-sm-6',
          type: 'input',
          key: 'instagramURL',
          templateOptions: {
            label: 'URL do instagram',
            required: false,
          }
        },
      ],
    },
    {
      fieldGroupClassName: 'row',
      fieldGroup: [
        {
          className: 'col-sm-4',
          type: 'combobox',
          key: 'animalAge',
          templateOptions: {
            label: 'Idade',
            options: [
              { id: 0, name: 'BELOW_TWO_MONTHS', label: 'Menos que dois meses' },
              { id: 1, name: 'TWO_TO_SIX_MONTHS', label: 'De dois a seis meses' },
              { id: 2, name: 'SEVEN_TO_ELEVEN_MONTHS', label: 'De sete a onze meses' },
              { id: 3, name: 'ONE_YEARS', label: 'Um ano' },
              { id: 4, name: 'TWO_YEARS', label: 'Dois anos' },
              { id: 5, name: 'THREE_YEARS', label: 'Três anos' },
              { id: 6, name: 'FOUR_YEARS', label: 'Quatro anos' },
              { id: 7, name: 'FIVE_YEARS', label: 'Cinco anos' },
              { id: 8, name: 'MORE_SIX_YEARS', label: 'Mais de seis anos' },
            ],
            labelProp: 'label',
            valueProp: 'name',
            required: true,
          },
        },
        {
          className: 'col-sm-4',
          type: 'combobox',
          key: 'animalType',
          templateOptions: {
            label: 'Tipo',
            options: [
              { id: 0, name: 'DOG', label: 'Cachorro' },
              { id: 1, name: 'CAT', label: 'Gato' },
            ],

            labelProp: 'label',
            valueProp: 'name',
            required: true,
          },
        },
        {
          className: 'col-sm-4',
          type: 'combobox',
          key: 'size',
          templateOptions: {
            label: 'Tamanho',
            options: [
              { id: 0, name: 'SMALL', label: 'Pequeno' },
              { id: 1, name: 'AVERAGE', label: 'Médio' },
              { id: 2, name: 'BIG', label: 'Grande' },
            ],
            labelProp: 'label',
            valueProp: 'name',
            required: true,
          },
        },
      ],
    },
    {
      type: 'textarea',
      key: 'description',
      templateOptions: {
        label: 'Descrição',
        rows: 5
      },
    },
    {
//THIS IS THE FIELD I WANT TO ADD************************************************************************
      type: 'file',
      key: 'image',
      templateOptions: {
        label: 'Imagem do animal',
        accept: 'image/*',
        required: true,
      },
    },
    {
      fieldGroupClassName: 'row',
      fieldGroup: [
        {
          className: 'col-sm-6',
          type: 'input',
          key: 'race',
          templateOptions: {
            label: 'Raça',
            required: true,
          },
        },
        {
          className: 'col-sm-6',
          type: 'input',
          key: 'priority',
          templateOptions: {
            type: 'number',
            label: 'Prioridade',
            max: 10,
            min: 0,
            pattern: '\\d{5}',
          },
        },
      ],
    },
  ];

[nzbin]

Please check the ngx-formly docs, you should customize a file type
https://formly.dev/docs/guide/custom-formly-field

[Galleazzo]

Thank you very much! What I did was create a "custom" component for this type of input, then I declared the component in my AppModule, I also made a FormlyModule.forRoot in my imports. Once that was done, I just put the name of my component in FormlyFieldConfig.

Custom component:

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

@Component({
    selector: 'formly-field-input',
    template: `
   <input type="file" [formControl]="formControl" [formlyAttributes]="field">
 `,
})
export class FormlyFieldInput extends FieldType<FieldTypeConfig> { } 

AppModule:

@NgModule({
  declarations: [AppComponent, FormlyFieldInput],
  imports: [
    FormlyConfigModule.forRoot(),
    FormlyModule.forRoot({
      types: [
        { name: 'inputFile', component: FormlyFieldInput },
      ]
    }),
  ]
})
export class AppModule {}

In my FormlyFieldConfig I put this:

{
      type: 'inputFile',
      key: 'animalImage',
      templateOptions: {
        label: 'Imagem do animal',
        accept: 'image/*',
      },
    },

[nzbin]

The FormlyModule.forRoot is redundant, please check the FormlyConfigModule

ng-matero/src/app/formly-config.module.ts

Lines 12 to 19 in 17f98c4

	const formlyModuleProviders = FormlyModule.forRoot({
	types: [
	{
	name: 'combobox',
	component: FormlyFieldComboboxComponent,
	wrappers: ['form-field'],
	},
	],