rekit / antd-form-builder

Dynamic meta driven React forms based on antd.
https://rekit.github.io/antd-form-builder
MIT License
425 stars 88 forks source link

is there a way to define the condition to enable / disable fields inside the meta #165

Open deekshithmr95 opened 1 year ago

deekshithmr95 commented 1 year ago

is there a way to define the condition to enable/disable fields inside the meta, For example

const meta = [ { key: 'favoriteFruit', label: 'Favorite Fruit', widget: 'radio-group', options: ['Apple', 'Orange', 'Other'], initialValue: 'Apple', }, { key: 'disableInput', label: 'Sample Input to disable if the user selects Orange, widget: 'input', }, ]

I want to disable the input field if the user selects the Orange from the radio group

berakoc commented 1 year ago

Yes. You can definitely do that. But this issue is not about antd-form-builder, it's about Antd Form. You have to listen the changes in 'favoriteFruit' field and then conditionally remove the other field. I leave an example below.

const FruitForm = () => {
  const [form] = Form.useForm();
  // Only usable when antd@4.20.0 or above
  const favoriteFruit = Form.useWatch('favoriteFruit', form);
  const meta = [
    {
      key: 'favoriteFruit',
      label: 'Favorite Fruit',
      widget: 'radio-group',
      options: ['Apple', 'Orange', 'Other'],
      initialValue: 'Apple',
    },
    favoriteFruit !== 'orange' && {
      key: 'disableInput',
      label: 'Sample Input to disable if the user selects Orange',
      widget: 'input',
    },
  ].filter(Boolean);

  return 'Some JSX';
};