Conditionals in Field Arrays

Scope: Schema / FormRenderer

Description: Would love the ability to put up conditionals within field arrays. Currently now the condition target is an exact path, working with field arrays the field will be an array [0], [1] etc, thus making it impossible to dynamically alter the condition based on every new “row” of field array directly in the schema.

Schema Short example code (disregard obvious type errors)

const fieldOptions = [...fieldTypeOptions];
const fieldSchema = [...schemaFields];
const searchField = {
    component: "field-array",
    name: "FieldArr",
    fields: [
        {
            FormFieldGridProps: { md: 12 },
            component: "autocomplete-async",
            label: "Field type",
            name: "FieldType",
            options: fieldOptions,
        },
        ...Object.entries(fieldSchema).map((entry) => {
            const [key, field] = entry;
            const target = fieldOptions.find((item) => item.value == key);

            return Object.assign(field, {
                FormFieldGridProps: { md: 12 },
                condition: {
                    when: "FieldType",
                    is: target ,
                    then: { visible: true },
                },
            });
        }),
    ],
};

The condition will not match since FieldType in the instance will be “FieldArr[0].FieldType” and continuing on the next added field array the target will be “FieldArr[0].FieldType”, making it impossible to dynamically match field array conditions based on the current instance “row”

Would be great if you could target the path based on the current index of field array, for example:

condition: {
    when: (fieldIndex, rowData) => `FieldArr[${fieldIndex}].FieldType[0]`,
    is: target,
    then: { visible: true },
},

[tinkotvas]

Working as intended!

[Hyperkid123]

🎉 This issue has been resolved in version 2.10.0 🎉

The release is available on

• react-form-renderer (@latest dist-tag)

• pf3-component-mapper (@latest dist-tag)

• pf4-component-mapper (@latest dist-tag)

• mui-component-mapper (@latest dist-tag)

Demo can be found here!