How to get the JSON on click of Submit button while using ant design Form component

Viewed 202

I am trying to get the JSON on click of Submit button as below:

{
 "qbClientInfo":{
  "FullyQualifiedName": "Test", 
  "PrimaryEmailAddr": {
    "Address": "test@email.com"
  }, 
  "DisplayName": "Test Name", 
  }
}

For that, I have created <Form> as

   <Form
        layout="vertical"
        size="medium" 
        onFinish={onNext}
    >
            <Form.Item
                label="Fully Qualified Name:"
                name="FullyQualifiedName"
                style={{ width: "50%" }}
            >
                <Input />
            </Form.Item>
            <Form.Item
                label="Email Address:"
                name="Address"
                style={{ width: "50%" }}
            >
                <Input />
            </Form.Item>  <Form.Item
                label="Display Name:"
                name="DisplayName"
                style={{ width: "50%" }}
            >
                <Input />
            </Form.Item>
            <Form.Item
              style={{ marginTop: "35px" }}
            >
           <Button
                type="primary"
                htmlType="submit"
                style={{ marginLeft: "15px" }}
                size="large"
              >
                Submit
           </Button>
       </Form.Item>
    <Form>

But this gives this JSON when the submit button is clicked.

{
  "FullyQualifiedName": "Test", 
  "Address": "test@email.com"
  "DisplayName": "Test Name", 
}

I tried putting <Form.Item> inside another <Form.Item> but it didn't work.

1 Answers

Change name of Form.Item from name="Address" to name={['PrimaryEmailAddr', 'Address']} as shown in docs

Related