Conditions for fields in field arrays

[yldshv]

Hello everyone, today I encountered a problem for which there might already be a solution, but I might not be able to find it.

Snippet:

{
   "name":"list",
   "label":"List",
   "component":"object-list", //our name for a field-array
   "fields":[
      {
         "name":"status",
         "label":"Status",
         "component":"select",
         "clearedValue":null,
         "dataType":"integer",
         "options":[
            {
               "label":"Status 1",
               "value":1
            },
            {
               "label":"Status 2",
               "value":2
            },
            {
               "label":"Status 3",
               "value":3
            }
         ],
      },
      {
         "name":"test",
         "label":"Test",
         "component":"radio",
         "dataType":"boolean",
         "options":[
            {
               "label":"No",
               "value":false
            },
            {
               "label":"Yes",
               "value":true
            }
         ],
         "condition":{
            "or":[
               {
                  "when":"list[0].status", //just to highlight this
                  "is":1
               },
               {
                  "when":"list[0].status", //just to highlight this
                  "is":3
               }
            ],
            "then":{
               "visible":true
            }
         }
      }
   ]
}

As you can see here, I have list[0].status in the "when" field as a field name. Now, logically, the condition only works for the first item in the array list.

Is there a way to pass this differently in the schema, for example, list[index].status or something similar? If not, wouldn't that be a useful addition?

Thanks in advance and best regards,
Daniel

[Hyperkid123]

Hi @yldshv. You can define the condition as a function to be able to dynamically resolve the when attribute.

https://www.data-driven-forms.org/schema/condition-schema#when

For your example I believe the function would look something similar to this:

          condition: {
            or: [
              {
                when: (field) => {
                  return `${field.name.split(".").shift()}.status`;
                }, //dynamic when condition
                is: 1,
              },
              {
                when: "list[0].status", //static
                is: 3,
              },
            ],
            then: {
              visible: true,
            },
          },

If you need a schema that is strictly defined via json, we have recently added a condition mapper: https://www.data-driven-forms.org/mappers/condition-mapper#heading-conditionmapper

Edit: Here is a codesandbox with your example. I just had to use the default field array component.

[yldshv]

Hi @Hyperkid123 ,
we actually store the schemas in a database, which is why I tried it with the conditionMapper. It seems to work in principle, but only during the initial load. After that, when there's a value change in the status field, the function in the condition mapper is not executed anymore. Do you have any tips? Do i have to execute it somehow manually?

Here's the code in the sandbox:
CodeSandBox

Edit:
I've been testing a bit more now and found that when I use the condition mapper for "is" it works as desired with every ValueChange from the field in "when" (static). However, when I have a static value in "is" and a function via the condition mapper in "when" it only executes the function once and then never again. I might be doing something wrong, though.

[Hyperkid123]

@yldshv Sorry I was busy with work stuff. I'll take a look, seems like the when callback is not being triggered properly then
. I'll let you know ASAP.

[Hyperkid123]

OK, you can fix the by adding a values subscription. Your condition depends on a value from another field but the form is by default set to not listen only to field changes.

Can you add subscription={{ values: true }} prop to the FormRendered?

[yldshv]

OK, you can fix the by adding a values subscription. Your condition depends on a value from another field but the form is by default set to not listen only to field changes.

Can you add subscription={{ values: true }} prop to the FormRendered?

That helped. Now works as it should.

[Hyperkid123]

@yldshv OK. This was strange to me because I remember I had written some code to specifically get around the subscription issue as the subscription can have a negative impact on performance in very large forms. And in fact, we have missed the mapped condition case. I'll open a PR to ensure the condition works as expected by default without having to change the subscription.

[yldshv]

@Hyperkid123 while you working on it maybe here is the next thing :O mappedAttributes in an or condition:

              "condition": {
                "or": [
                  {
                    "mappedAttributes": {
                      "when": ["objListResolver"]
                    },
                    "is": 1
                  },
                  {
                    "mappedAttributes": {
                      "when": ["objListResolver"]
                    },
                    "is": 7
                  }
                ],
                "then": {
                  "visible": true
                }
              }

does not work. Error in console: Missing conditionMapper entry for objListResolver!
Without the or condition it works :/

[Hyperkid123]

@yldshv I've converted the topic into an issue: #1428

I'll take a look at the or variant as well.

[yldshv]

@yldshv I've converted the topic into an issue: #1428

I'll take a look at the or variant as well.

Hi @Hyperkid123,
updated to 3.22.1 and everything works fine! Thank you!