How to update props on condition?

[thecodejack]

I need to update prop disabled based on value of other form data. How can I achieve same?

Here is what I expect to work

fields = {
          component: "select",
          name: "origin",
          label: "Country of Origin",
          options: [
            {
              label: "US",
              value: "US"
            },
            {
              label: "UK",
              value: "UK"
            },
            {
              label: "India",
              value: "India"
            }
          ]
        },
        {
          component: "checkbox",
          label: "Need H1B Visa",
          name: "needVisa",
          condition: {
            when: "origin",
            is: "India",
            then: {
              set: { disabled: true }
            },
            else: { set: { disabled: false } }
          }
        }

But above one is not working.

I tried resolveProps as well. It doesn't have complete form data.

Any idea how can I acheive same?

[rvsia]

We unfortunately do not support setting props via conditions.

However, it's achievable via resolveProps, check this demo: https://codesandbox.io/s/poc-forked-525pk

I think you missed the important part: set subscription to values as it is stated here. Final Form by default is not rerendering each field on each change, that would be a big performance hit but in this case you need to do it to run the computation on each change. You can also wrap the field in FormSpy to optimize it, however, if your form does not have tens of fields, it will be totally OK to use subscription.

[thecodejack]

JSON scheme is expected to come from backend for me. I can't get javascript from same. And one of the things that would be great add on I feel is having disabled just like visible at least like below

condition: { when: 'x', is: 'y', then: { disabled: true } }

Or is there any way I can create own conditional JSON schema that can work?

[rvsia]

Oh, sorry, for some reason the code in the demo wasn’t saved.

but it looked like this:

resolveProps: (props, field, formOptions) => formOptions.getState().values.origin === 'India' ? { isDisabled: true} : { isDisabled: false}

And you have to set this prop on the renderer:

<FormRenderer
  ...
  subscription={{values: true}}
/>

And to store it in the DB, you can use action mapper: https://data-driven-forms.org/mappers/action-mapper

[rvsia]

Or you can write the field 2x in the schema with different isDisabled prop. The first field will be hidden when the origin is India and second one will be hidden when it’s not India.

[Hyperkid123]

@thecodejack solution with resolve props should work with the correct subscription. However, you have to be careful when changing the props as the field value is preserved.

For example, if the user first inputs a value to a field, which is disabled after some user action, the form will still have the value in its state and it will be included in a submit object. So you will have to handle that as well.

This is one of the reasons why we don't allow setting props conditionally because it usually comes with other necessary actions. So usually in our projects, we tend to use custom components if possible.

[thecodejack]

Thanks I will look into form spies and action mappers

[Hyperkid123]

@thecodejack there is a working example: https://codesandbox.io/s/poc-forked-6o574?file=/src/App.js

But read this comment first: #1000 (reply in thread)

[rvsia]

We added multiple examples to documentation how to handle all your problems with resolveProps: https://data-driven-forms.org/examples/resolve-props-example (if you can't see it, refresh page to clear the cache)

[thecodejack]

Thank you. I can see it.