Condition based on an array field 'includes'

[logancameo]

Hi!

Our form has a field that holds an array of strings, and we'd like to conditionally hide/show other fields based on whether or not that array contains a given value. Curious how we might achieve that? An example use-case below.

// Mock form values
type FormValues = {
  multiSelectField: string[];
  conditionalField?: string;
};

We only want the input for conditionalField to display if multiSelectField includes some specific value, but the condition schema seems to only work on existence and single value checks.

Ideally, we have something like:

// Schema for our conditionally shown field
{
  name: 'conditionalField',
  component: 'multi-select',
  condition: {
    when: 'multiSelectField',
    includes: 'foo' 
  }
}

Such that when multiSelectFields array value includes 'foo', our conditionalField is rendered, otherwise it's not.

Let me know if that makes sense and is supported - we can take a look at adding this functionality in a PR if it's not and seems useful to others.

[Hyperkid123]

hi @logancameo the condition definition allows using a function for the when or is attributes. That should give you access to the right values. If you know the index. Here is a snippet from our docs: https://data-driven-forms.org/schema/condition-schema#heading-conditionschema#when

If you send me a sample schema I can tinker around with it and prepare an example.

{
  when: (field) => `${getFieldNumber(field)}.name`
}
/*
  field = {
    name: 'person[14]',
  }
*/

It's possible that your use case may require a custom component wrapper. In that case, a component wrapped in a FormSpy or with additional useFieldApi if you know the name of the field, will give you the array, and then you can choose which components to render.

[rvsia]

@logancameo

Hello,

there is no schema based attribute to support that, but you can achieve the same result using custom is function.

Read more here

condition: {
  when: 'Foo',
  is: (value) => value?.includes('foo')
}

[rvsia]

(And yeah, it would be fine to include this as a schema attribute option so people can use it without javascript functions.)

[logancameo]

Amazing, thanks so much for the quick response - we'll give that a go. Cheers @rvsia