My question is divided into two parts as I want to handle both cases.
I need to find a way to persist form data, after it is submitted and moved to a different tab in the same page.
After filling the form the user gets redirected to another page and when he/she hits a 'back' button gets redirected to this form page and the data they entered should be present.
<Formik
initialValues={addprojValues}
validationSchema={Yup.object({
projectName:Yup.string().required("project Name Required").
customerId:Yup.string(),
companyName:Yup.string().required
email: Yup.string().matches(regexEmailValidation, "Domain Name Missing").required("Email Required"),
shortName:Yup.string().required("Short Name Required")
requirement:Yup.string().required("Requirement Required"),
timeLine:Yup.string().required("Timeline Required").max(3,"Number Of Days Exceeded"),
projectStartDate:Yup.date().required("Project StartDate Required"),
projectBudget:Yup.string().required("Project Budget Required"),
})}
onSubmit={(values)=>{
axios.post(createProject,values).then((res)=>{
}).catch(err=>{return err})
}}
>
{
formik =>
<Form autoComplete="off" onSubmit={formik.handleSubmit} id="form" >
<div className={styles.addProjectFormData}>
<div className={styles.formFeildsColumn1}>
<input type="text" placeholder="Project Name" name="projectName" value={formik.values.projectName} onChange={formik.handleChange}/>
<ErrorMessage name="projectName" render={msg => <div style={errMsg}>{msg}</div>} />
<Autocomplete freeSolo
disablePortal
onInputChange={(e)=>getClientsNames(e.target.value)}
className={styles.autoCompleteClientName}
onChange={(event,value)=>formik.values.customerId=value.id}
options={clientNames}
getOptionLabel={option=>option?.name}
renderInput={(params) => (
<TextField
name="customerId"
value={formik.values.customerId}
placeholder="Client Name"
onChange={formik.handleChange}
{...params}
InputProps={{
...params.InputProps,
type: 'search',
style:{color:"white"},
}}
/>
)}
>
</Autocomplete>
<ErrorMessage name="customerId" render={msg => <div style={errMsg}>{msg}</div>} />
<input type="text" placeholder="Company Name" name="companyName" value={formik.values.companyName} onChange={formik.handleChange}/>
<ErrorMessage name="companyName" render={msg => <div style={errMsg}>{msg}</div>} />
<input type="text" placeholder="Email" name="email" value={formik.values.email} onChange={formik.handleChange} />
<ErrorMessage name="email" render={msg => <div style={errMsg}>{msg}</div>} />
<input type="text" placeholder="Short Name" name="shortName" value={formik.values.shortName} onChange={formik.handleChange} />
<span style={{display:"flex",alignItems:"center"}}>
<p>This Name is used for invoices and estimates</p>
<img src="../../../assets/infoImg.svg"/>
</span>
<ErrorMessage name="shortName" render={msg => <div style={errMsg}>{msg}</div>} />
{projectCreation && <Select
className={styles.projectTypeDropdown}
name="projectType.type"
value={formik.values.projectType.type}
onChange={formik.handleChange}
autoWidth
displayEmpty
renderValue={(selected) => {
if (selected.length === 0) {
return <p>Project Type</p>;
}
return selected;
}}
inputProps={{ "aria-label": "Without label" }}
>
{projectType?.map((item)=>(
<MenuItem value={item.type} onClick={()=>formik.values.projectType.id=item.id} >{item.type}</MenuItem>
))}
</Select>}
<textarea rows={8} placeholder="Requirement" name="requirement" value={formik.values.requirement} onChange={formik.handleChange} />
<ErrorMessage name="requirement" render={msg => <div style={errMsg}>{msg}</div>} />
</div>
<div className={styles.formFeildsColumn2}>
<div className={styles.ProjectAsset}>
<p>Project Budget</p>
<input type="text" name="projectBudget" value={formik.values.projectBudget} onChange={formik.handleChange} className={styles.projectBudgetValue} />
</div>
<ErrorMessage name="projectBudget" render={msg => <div style={errMsg}>{msg}</div>} />
</div>
</div>
<button type="submit" className={styles.createProjectFormBtn} >create</button>
</Form>
}
</Formik>
I have tried using setFieldvalue to the form and it works only in case1 and not in the second case.