antd-form-builder icon indicating copy to clipboard operation
antd-form-builder copied to clipboard

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

Open deekshithmr95 opened this issue 1 year ago • 1 comments

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

deekshithmr95 avatar Mar 02 '23 11:03 deekshithmr95

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 [email protected] 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';
};

berakoc avatar Oct 18 '23 07:10 berakoc