Two Antd forms, one component - reactjs

Question

I have two antd forms within a single component. The first form is a register form where a user inputs various information (firstname, lastname, email, etc..) The submit button triggers a function to open a modal with another form for them to verify their phone number by generating a code that is texted to them. Once the code is typed and they hit verify, it verifies if it is the correct code - then i would like for it to register the user but I am having difficulties pulling in the values from the first form..
Is there a specific way to go about doing this? I thought maybe I could utilize useState and set the values to component level state but even that didnt work..
form
<Form
layout="vertical"
name="register-form"
initialValues={initialValues}
onFinish={handleVerification}
>
<Row gutter={ROW_GUTTER}>
<Col xs={24} sm={24} md={12}>
<Form.Item
name="firstName"
label="First Name"
rules={rules.firstName}
hasFeedback
>
<Input placeholder="Enter First Name" />
</Form.Item>
</Col>
<Col xs={24} sm={24} md={12}>
<Form.Item
name="lastName"
label="Last Name"
rules={rules.lastName}
hasFeedback
>
<Input placeholder="Enter Last Name" />
</Form.Item>
</Col>
</Row>
<Row gutter={ROW_GUTTER}>
<Col xs={24} sm={24} md={12}>
<Form.Item
name="phone"
label="Phone Number"
rules={rules.phone}
hasFeedback
>
<Input placeholder="Enter Phone Number" />
</Form.Item>
</Col>
<Col xs={24} sm={24} md={12}>
<Form.Item name="city" label="City" rules={rules.city} hasFeedback>
<Select placeholder="Select City">
<Option value="Lancaster, PA">Lancaster, PA</Option>
</Select>
</Form.Item>
</Col>
</Row>
<Form.Item
name="email"
label="Email Address"
rules={rules.email}
hasFeedback
>
<Input placeholder="Enter Email Address" />
</Form.Item>
<Form.Item
name="password"
label="Password"
rules={rules.password}
hasFeedback
>
<Input.Password placeholder="Enter Password" />
</Form.Item>
<Form.Item
name="confirmPassword"
label="Confirm Password"
rules={rules.confirm}
hasFeedback
>
<Input.Password placeholder="Confirm Password" />
</Form.Item>
<Form.Item name="tos" valuePropName="checked">
<Checkbox>
I agree to the <Link to="/">Terms of Service</Link> and{' '}
<Link to="/">Privacy Policy</Link>.
</Checkbox>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" block>
Register
</Button>
</Form.Item>
</Form>
<Modal
title="Account Verification"
centered
visible={modal}
onOk={() => setModal(false)}
onCancel={() => setModal(false)}
>
<p>
To finish registering, please enter the verification code we just sent
to your phone. If you didn't receive a code, make sure your entered
phone number is correct and sign up again. Your code will expire upon
closing this popup.
</p>
<Form layout="vertical" name="verify-phone-form" onFinish={onSubmit}>
<Form.Item name="enteredCode" label="Verify">
<Input placeholder="Enter Code" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" block>
Verify
</Button>
</Form.Item>
</Form>
</Modal>
handleVerification
const handleVerification = async (values) => {
const { phone, email } = values;
setModal(true);
try {
const response = await postRegisterCheckDuplicate({ email, phone });
if (response.data.success) {
switch (response.data.message) {
case 0:
try {
const response = await dispatch(
attemptRegisterVerify({ to: phone })
);
console.log('handleVerification: ', response.message);
if (response.success) {
setGeneratedCode(response.message);
} else {
console.log(response.message);
}
} catch (error) {
console.log(error);
}
break;
case 1:
console.log('Email Address already in use.');
break;
case 2:
console.log('Phone number already in use.');
break;
case 3:
console.log('Email and Phone in use.');
break;
}
} else {
console.log(response.data.message);
}
} catch (error) {
console.log(error);
}
};
onSubmit
const onSubmit = (values) => {
const { enteredCode } = values;
if (generatedCode === enteredCode) {
try {
console.log('values :', values);
// dispatch(attemptRegister(values));
} catch (error) {
console.log(error);
}
} else {
console.log('Verification code incorrect');
}
};

Answer 1

You can create a form instance (hooks) and reference it to the first form so you can use the api of the instance. You can check more here antd FormInstance
const [registerForm] = Form.useForm();
const handleSubmit = (values) => {
const { enteredCode } = values;
console.log(registerForm.getFieldsValue());
//output is the values in the first form
};
<Form form={registerForm} layout="vertical" onFinish={handleVerification}>
...
</Form>
I created a small version of your work. See working code here:
You can also check this one antd control between forms