So basically, I have two screens. One screen has a form which I am rendering through Formik and on the other page I am printing the response from my API based on the form values and a back button to go back to the previous screen (having the form).
My concern is when I enter the fields correctly including the checkbox and then submit the form then go onto second screen and then when I come back to the first screen(form screen), the fields which takes written input as their respective values show as filled but the checkboxes show as unchecked.
My code for useFormik is as following:
const metalsFormData = useFormik({
initialValues: {
metal: [],
riskLevel: "Select Risk Type",
age: "",
retirement: "",
retirementZipCode: "",
retirementVehicle: "",
dependantAge: ""
},
validationSchema: Yup.object({
metal: Yup.array().min(1, 'Please select an option'),
age: Yup.string().required('Please enter an age.'),
retirement: Yup.array().min(1, 'Please select an option'),
retirementZipCode: Yup.string().required('Please enter a zip code.'),
retirementVehicle: Yup.array().min(1, 'Please select an option')
}),
onSubmit: (rawObject) => {
props.portfolioData(rawObject);
setStep2(true);
}
});
My HTML for checkbox is as following:
<div className='secure-checkboxes'>
<div role="group" aria-labelledby="checkbox-group">
<label>
<input type="checkbox" name="retirement" value="Yes" onChange={metalsFormData.handleChange} onBlur={metalsFormData.handleBlur} />
<span>Yes</span>
</label>
<label className='ml-4'>
<input type="checkbox" name="retirement" value="No" onChange={metalsFormData.handleChange} onBlur={metalsFormData.handleBlur} />
<span>No</span>
</label>
</div>
</div>
I would like that when I come to the second screen after filling all the fields including checkboxes and then come back to the first screen having the form, all the fields should be prefilled with the values I had written and the checkboxes shall be shown as checked.
Aucun commentaire:
Enregistrer un commentaire