I have a basic form:
<Form
layout="vertical"
form={form}
onFinish={onSubmit}
onValuesChange={onValueChanges}
>
<Form.Item
label="Foo"
name="requirePassword"
valuePropName="checked"
>
<Switch />
{requirePasswordSettingDirty && (
<span className={styles.requirePasswordWarning}>
Required password
</span>
)}
</Form.Item>
</Form>
When I click the switch, it doesn't trigger the callback onValueChanges. What am I missing?
Data binding is tied to a Form.Item with name key and wraps only an Input. Therefore if you have additional elements alongside the Input, such as a custom label element, you'll have to nest Form.Items.
<Form.Item label="Foo" valuePropName="checked">
<Form.Item name="requirePassword">
<Switch />
</Form.Item>
{requirePasswordSettingDirty && <span>Required password</span>}
</Form.Item>