Make sure toggle is enabled if edit has a value
In react and antd design, I have this component, I want the toggle to be checked on the edit page IF the fields have a value, but only by default, you should still be able to untoggle it without unsetting the value manually:
<Row>
<Col span={2}>
<Form.Item name="bidWindowToggle"
valuePropName="checked"
label={t("buildings.fields.offerSettings.bidWindowToggle", "Bid Window")}
>
<Switch />
</Form.Item>
</Col>
<Col span={22}>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) => {
// Check if the toggle has changed
if (prevValues.bidWindowToggle !== currentValues.bidWindowToggle) {
// If toggled off, set startDate and endDate to null
if (!currentValues.bidWindowToggle) {
form.setFieldsValue({
offerSettings: {
startDate: null,
endDate: null,
}
});
}
return true; // Return true to trigger a re-render
}
return false; // No update needed
}}
>
{({ getFieldValue }) =>
getFieldValue('bidWindowToggle') === true ? (
<Form.Item
<Row>
<Col span={2}>
<Form.Item name="bidWindowToggle"
valuePropName="checked"
label={t("buildings.fields.offerSettings.bidWindowToggle", "Bid Window")}
>
<Switch />
</Form.Item>
</Col>
<Col span={22}>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) => {
// Check if the toggle has changed
if (prevValues.bidWindowToggle !== currentValues.bidWindowToggle) {
// If toggled off, set startDate and endDate to null
if (!currentValues.bidWindowToggle) {
form.setFieldsValue({
offerSettings: {
startDate: null,
endDate: null,
}
});
}
return true; // Return true to trigger a re-render
}
return false; // No update needed
}}
>
{({ getFieldValue }) =>
getFieldValue('bidWindowToggle') === true ? (
<Form.Item
