Refine•2y ago

AntDesign: Conditionally show form fields

What's the easiest way to show/hide another form field based on whether another is true or false? If Field A is true, Field B should be visible. If Field B is false, Field B should have it's value set to null and be hidden.

const { formLoading, formProps, onFinish, saveButtonProps, queryResult } = useForm<IOnboardingChecklist>({
    resource: 'onboarding_checklist',
    id: userID,
    redirect: false,
    warnWhenUnsavedChanges: false,
});
<Form
{...formProps}
layout='vertical'
>
<Row>
    <Col span={8}>
        <Form.Item label='User has LinkedIn account' name='has_linkedin_account'>
            <Switch />
        </Form.Item>
    </Col>
    {
        // TODO: Conditionally show this if has_linkedin_account is true
    }
    <Col span={8}>
        <Form.Item label='LinkedIn archiving completed' name='linkedin_archiving'>
            <Switch />
        </Form.Item>
    </Col>
</Row>
</Form>

const { formLoading, formProps, onFinish, saveButtonProps, queryResult } = useForm<IOnboardingChecklist>({
    resource: 'onboarding_checklist',
    id: userID,
    redirect: false,
    warnWhenUnsavedChanges: false,
});
<Form
{...formProps}
layout='vertical'
>
<Row>
    <Col span={8}>
        <Form.Item label='User has LinkedIn account' name='has_linkedin_account'>
            <Switch />
        </Form.Item>
    </Col>
    {
        // TODO: Conditionally show this if has_linkedin_account is true
    }
    <Col span={8}>
        <Form.Item label='LinkedIn archiving completed' name='linkedin_archiving'>
            <Switch />
        </Form.Item>
    </Col>
</Row>
</Form>

const { formLoading, formProps, onFinish, saveButtonProps, queryResult } = useForm<IOnboardingChecklist>({
    resource: 'onboarding_checklist',
    id: userID,
    redirect: false,
    warnWhenUnsavedChanges: false,
});
<Form
{...formProps}
layout='vertical'
>
<Row>
    <Col span={8}>
        <Form.Item label='User has LinkedIn account' name='has_linkedin_account'>
            <Switch />
        </Form.Item>
    </Col>
    {
        // TODO: Conditionally show this if has_linkedin_account is true
    }
    <Col span={8}>
        <Form.Item label='LinkedIn archiving completed' name='linkedin_archiving'>
            <Switch />
        </Form.Item>
    </Col>
</Row>
</Form>

const { formLoading, formProps, onFinish, saveButtonProps, queryResult } = useForm<IOnboardingChecklist>({
    resource: 'onboarding_checklist',
    id: userID,
    redirect: false,
    warnWhenUnsavedChanges: false,
});
<Form
{...formProps}
layout='vertical'
>
<Row>
    <Col span={8}>
        <Form.Item label='User has LinkedIn account' name='has_linkedin_account'>
            <Switch />
        </Form.Item>
    </Col>
    {
        // TODO: Conditionally show this if has_linkedin_account is true
    }
    <Col span={8}>
        <Form.Item label='LinkedIn archiving completed' name='linkedin_archiving'>
            <Switch />
        </Form.Item>
    </Col>
</Row>
</Form>

kapa.ai•3/18/24, 9:41 PM

Hi @James. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•3/18/24, 9:41 PM

----------------------
You can achieve this by using the getFieldValuegetFieldValue method from Ant Design's Form instance to get the value of the 'has_linkedin_account' field. Then, you can conditionally render the 'linkedin_archiving' field based on this value.

Here's how you can do it:

const { formLoading, formProps, onFinish, saveButtonProps, queryResult } = useForm<IOnboardingChecklist>({
    resource: 'onboarding_checklist',
    id: userID,
    redirect: false,
    warnWhenUnsavedChanges: false,
});

<Form
{...formProps}
layout='vertical'
>
<Row>
    <Col span={8}>
        <Form.Item label='User has LinkedIn account' name='has_linkedin_account'>
            <Switch />
        </Form.Item>
    </Col>
    {
        formProps.form.getFieldValue('has_linkedin_account') && (
            <Col span={8}>
                <Form.Item label='LinkedIn archiving completed' name='linkedin_archiving'>
                    <Switch />
                </Form.Item>
            </Col>
        )
    }
</Row>
</Form>

const { formLoading, formProps, onFinish, saveButtonProps, queryResult } = useForm<IOnboardingChecklist>({
    resource: 'onboarding_checklist',
    id: userID,
    redirect: false,
    warnWhenUnsavedChanges: false,
});

<Form
{...formProps}
layout='vertical'
>
<Row>
    <Col span={8}>
        <Form.Item label='User has LinkedIn account' name='has_linkedin_account'>
            <Switch />
        </Form.Item>
    </Col>
    {
        formProps.form.getFieldValue('has_linkedin_account') && (
            <Col span={8}>
                <Form.Item label='LinkedIn archiving completed' name='linkedin_archiving'>
                    <Switch />
                </Form.Item>
            </Col>
        )
    }
</Row>
</Form>

In this code, formProps.form.getFieldValue('has_linkedin_account')formProps.form.getFieldValue('has_linkedin_account') will return the value of the 'has_linkedin_account' field. If this value is true, the 'linkedin_archiving' field will be rendered. If it's false, the 'linkedin_archiving' field will not be rendered.

Please note that this will only hide the 'linkedin_archiving' field from the UI. If you want to also set its value to null when 'has_linkedin_account' is false, you can use the setFieldsValuesetFieldsValue method:

if (!formProps.form.getFieldValue('has_linkedin_account')) {
    formProps.form.setFieldsValue({ linkedin_archiving: null });
}

if (!formProps.form.getFieldValue('has_linkedin_account')) {
    formProps.form.setFieldsValue({ linkedin_archiving: null });
}

This code should be placed in a

useEffect

useEffect

hook that depends on the value of 'has_linkedin_account', so it runs whenever this value changes.

kapa.ai•3/18/24, 9:41 PM

For more information, refer to the Ant Design Form (https://ant.design/components/form/) documentation and the Refine's useForm hook (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/) documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•3/18/24, 9:41 PM

@204362818592440323 kapa.ai is still learning and improving, please let us know how it did by reacting below

foolish-indigoOP•3/18/24, 9:43 PM

@kapa.ai Is there a way to do a live update of the field when the value is changed? Currently it requires a form reload.

kapa.ai•3/18/24, 9:43 PM

Let me check the knowledge base for you. One moment!

kapa.ai•3/18/24, 9:43 PM

----------------------
Yes, Refine provides a liveModeliveMode property in its useFormuseForm hook that can be used to update data in real-time throughout your app. You can set liveModeliveMode to "auto" to update data automatically if a related live event is received.

Here's how you can use it:

useForm({  
 refineCoreProps: {  
 liveMode: "auto",  
 },  
});

useForm({  
 refineCoreProps: {  
 liveMode: "auto",  
 },  
});

In this code, liveMode: "auto"liveMode: "auto" means that the form data will be updated automatically whenever a related live event is received.

For more information, refer to the Refine's useForm hook (https://refine.dev/docs/packages/react-hook-form/use-form#livemode) documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•3/18/24, 9:43 PM

@204362818592440323 kapa.ai is still learning and improving, please let us know how it did by reacting below