[Custom Components] must not be an array

[saravanapriyanm]

I am using a custom component with the following config:

{
  type: 'cascade',
  selector: 'app-cascade',
  title: 'Cascade Select',
  group: 'basic',
  icon: 'angle-double-down',
  editForm: minimalEditForm,
  fieldOptions: ['key'],
  changeEvent: 'valueChange',
  schema: {
    customDefaultValue: (ctx) => {
      const fields = ctx.component.customOptions.filterValues;
      return fields.map((field) => ({
        key: field.selectParameter,
        value: field.defaultParameter,
      }));
    },
  },
}

Value type for the component is:

{key: string, value: string}[]

When changing value, the following error is shown as validation error:

{field_label_here} must not be an array

[amyth]

I have the same issue. I am working on a custom formio component that supports multiple file image(s) upload. And i want to store the value as an array of uploaded image id's. Following is my custom component.

export class ImageFieldComponent implements FormioCustomComponent<string[]> {
  @Input() value: string[] = [];
  @Output() valueChange: EventEmitter<string[]>;
  @ViewChild('imageCropper') imageCropper!: ImageCropperComponent;
  @Output() upload: EventEmitter<any> = new EventEmitter<any>();
  @Output() delete: EventEmitter<any> = new EventEmitter<any>();
  name: string = 'image';
  disabled: boolean = false;

  src: string = '';
  srcs: any = [];
  fileChosen: boolean = false;
  fileToUpload: any;
  imageChangedEvent: any = '';
  croppedImage: any = '';
  allFiles: any = [];
  currentFileIndex: number = 0;
  fileSelectedEvent: any;
  currentImage: any;
  currentImageBlob: any;
  selectedImage: any;

  constructor(
    private sanitizer: DomSanitizer,
    private filesService: FilesService,
    private credentialsService: CredentialsService,
    private helperService: HelperService,
    private router: Router,
    private route: ActivatedRoute
  ) {
    this.valueChange = new EventEmitter<string[]>();
  }

  updateValue(payload: string) {

    if (this.value && this.value.length > 0) {
      this.value.push(payload); // Should be updated first
      this.valueChange.emit(this.value); // Should be called after this.value update
    }  else {
      this.value = [payload];
      this.valueChange.emit(this.value); // Should be called after this.value update
    }
    console.log(this.value);
  }

......

Whenever I try to update the this.value I get a validation error that "Image upload must not be an array". How can I have this component store value as an array of strings ?

[lane-formio]

@saravanapriyanm Did you ever get around this? Going through older issues and if you could provide the entire custom component it would help figure this out.