Antd switch not triggering onValuesChange when toggling?

November 19, 2021

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?

>Solution :

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>