Is it possible to get data of some form fields separately by clicking on a button in react?

Question

I have a form with several fields I need to get values of some fields and save them in a state by clicking on a button and then sent all form field data to server by clicking on submit button. Is there any way to do it in react?

Here is an example code:

In this example user can add several account information by clicking on "Add account info" button I need to collect values of "Account Information" part of form in an array like this:

"accountInfo": [
    {
      "email": "",
      "securityQuestion": ,
      "securityAnswer": ""
    }
  ] 

Finally by clicking on submit button all form values (including several account info) should be send to server.

import React, { useCallback } from 'react'
import { Form, Button } from 'antd'
import FormBuilder from 'antd-form-builder'

export default () => {
  const [form] = Form.useForm()
  const handleFinish = useCallback(values => {
    console.log('Submit: ', values)
  })
  const meta1 = [
    { key: 'name.first', label: 'First Name', required: true },
    { key: 'name.last', label: 'Last Name', required: true },
    { key: 'dob', label: 'Date of Birth', widget: 'date-picker' },
  ]
  const meta2 = [
    {
      key: 'email',
      label: 'Email',
      rules: [{ type: 'email', message: 'Invalid email' }],
    },
    {
      key: 'security',
      label: 'Security Question',
      widget: 'select',
      placeholder: 'Select a question...',
      options: [{label: "What's your pet's name?", value: 1 }, {label: 'Your nick name?', value:2}],
    },
    { key: 'answer', label: 'Security Answer' },
  ]
  const meta3 = {
    fields: [
      { key: 'address', label: 'Address' },
      { key: 'city', label: 'City' },
      { key: 'phone', label: 'phone' },
    ],
  }

  return (
    <Form layout="horizontal" form={form} onFinish={handleFinish} style={{ width: '500px' }}>
      <fieldset>
        <legend>Personal Information</legend>
        <FormBuilder form={form} meta={meta1} />
      </fieldset>
      <fieldset>
        <legend>Account Information</legend>
        <FormBuilder form={form} meta={meta2} />
        <Form.Item wrapperCol={{ span: 16, offset: 8 }}>
        <Button type="primary">
          Add account info
        </Button>
      </Form.Item>
      </fieldset>
      <fieldset>
        <legend>Contact Infomation</legend>
        <FormBuilder form={form} meta={meta3} />
      </fieldset>
      <Form.Item className="form-footer" wrapperCol={{ span: 16, offset: 8 }}>
        <Button htmlType="submit" type="primary">
          Submit
        </Button>
      </Form.Item>
    </Form>
  )
}

Answer 1

There are two keys in antd FormInstance interface you might be interested in.

1. getFieldsValue to get whole values of your form by a set of field names.
2. getFieldValue to get the value by the field name.

However you can get those values and do whatever you want with them by button with htmlType="submit":

<Button form="myForm" htmlType="submit"> my btn </Button>

To make this button work do not forget to assign some function to the key onFinish of your form:

<Form
   onFinish={(formData) => console.log(formData)}
   id="myForm"
   // ... your other properties
>
   ...
</Form>