Want to use formik with tabs but have alot of forms ,one way is adding all my form inside the formik with the tabs but the code will not be very effiecient ,any example of tabs and components with formik to get all values any examples or liks will be appreciated
1 Answers
Just have to add values as props and handleChnage , for everything to work and errors as useFormikContext()
LOGINCOMPONENT
const LoginDetails = props => {
let captureForm = useFormikContext();
return (
<div>
<Box mt={2}>
<TextField
error={Boolean(
captureForm.touched.loginCode && captureForm.errors.loginCode
)}
helperText={
captureForm.touched.loginCode && captureForm.errors.loginCode
}
fullWidth
label="Login Code"
name="loginCode"
onChange={props.onChange}
value={props.values.loginCode}
variant="outlined"
onBlur={() => captureForm.setFieldTouched('loginCode', true)}
/>
</Box>
<Box mt={2}>
<TextField
error={Boolean(
captureForm.touched.password && captureForm.errors.password
)}
helperText={
captureForm.touched.password && captureForm.errors.password
}
fullWidth
label="Password"
name="password"
type={'password'}
onChange={props.onChange}
value={props.values.password}
variant="outlined"
onBlur={() => captureForm.setFieldTouched('password', true)}
/>
</Box>
</div>
);
};
export default LoginDetails;
//FORMIK
<Formik
innerRef={formRef}
enableReinitialize={true}
initialValues={{
//Login
loginCode: currentEntityData.loginCode || '',
password: currentEntityData.password || '',
}}
validationSchema={Yup.object().shape({
//Login
[props.entityType === 3 ? 'loginCode' : '']:
Yup.string().required('LoginCode is required.') || '',
[props.entityType === 3 ? 'password' : '']:
Yup.string().required('Password is required.') || '',
verified: Yup.bool(),
})}
onSubmit={async (
values,
{ resetForm, setErrors, setStatus, setSubmitting }
) => {
try {
//Call submitForm function then notification
submitForm(values).then(() => {
setMessageDisplay(true);
props.closeentityform();
props.refreshtable();
});
} catch (error) {
setStatus({ success: false });
setErrors({ submit: error.message });
setSubmitting(false);
}
}}
>
{({
errors,
handleBlur,
handleChange,
handleSubmit,
isSubmitting,
setFieldTouched,
setFieldValue,
touched,
values,
}) => (
<form onSubmit={handleSubmit} {...props}>
<Card>
{/*Banking Dialogue */}
<CardContent>
{/*Forms based in tabs */}
{/*Selective tabs based on type */}
<Tabs
value={value}
onChange={handleTabChange}
variant="scrollable"
textColor="primary"
scrollButtons="auto"
>
{props.entitytype === 3 ? <Tab label="Login Details" /> : ''}
{/*Login*/}
</Tabs>
{value === 0 && (
//Data
)}
{/*///////////////////////Login Details//////////////////////////// */}
{props.entitytype === 1
? value === 3
: value === 2 && (
<>
<Box mt={2}>
<LoginDetails
values={values}
onChange={handleChange}
/>
</Box>
</>
)}
{/*///////////////////////Member Details//////////////////////////// */}
{props.entitytype === 2
? value === 1 && (
<>
<MemberShip values={values} onChange={handleChange} />
</>
)
: props.entitytype === 1
? value === 2 && (
<>
<MemberShip values={values} onChange={handleChange} />
</>
)
: ''}
{/*/////////////////////////////////Staff //////////////////////////////*/}
{props.entitytype === 1
? value === 3
: value === 3 && (
<>
<Box mt={2}>
<Grid container spacing={3}>
<Grid item xs={4}>
<Typography>User</Typography>
<Checkbox
name="userCheck"
color="primary"
checked={userCheck}
onChange={() => isUserSelected()}
></Checkbox>
</Grid>
<Grid item xs={4}>
<Typography>Financial User</Typography>
<Checkbox
name="financialUserCheck"
color="primary"
checked={financialUserCheck}
onChange={() => isFinancialUserSelected()}
></Checkbox>
</Grid>
<Grid item xs={4}>
<Typography>Admin</Typography>
<Checkbox
name="userCheck"
color="primary"
checked={adminCheck}
onChange={() => isAdminSelected()}
></Checkbox>
</Grid>
</Grid>
<Box mt={2}></Box>
<TextField
fullWidth
label="Staff Number"
name="staff.staffId"
onBlur={handleBlur}
onChange={handleChange}
value={values.staff.staffId}
variant="outlined"
error={Boolean(
getIn(touched, 'staff.staffId') &&
getIn(errors, 'staff.staffId')
)}
helperText={
getIn(touched, 'staff.staffId') &&
getIn(errors, 'staff.staffId')
}
/>
</Box>
<Box mt={2}>
<TextField
fullWidth
label="Join Date"
type={'date'}
name="staff.joinDate"
onBlur={handleBlur}
onChange={handleChange}
value={values.staff.joinDate}
variant="outlined"
error={Boolean(
getIn(touched, 'staff.joinDate') &&
getIn(errors, 'staff.joinDate')
)}
helperText={
getIn(touched, 'staff.joinDate') &&
getIn(errors, 'staff.joinDate')
}
/>
</Box>
<Box mt={2}>
<TextField
fullWidth
label="Leave Date"
type="date"
name="staff.leaveDate"
onBlur={handleBlur}
onChange={handleChange}
value={values.staff.leaveDate}
variant="outlined"
error={Boolean(
getIn(touched, 'staff.leaveDate') &&
getIn(errors, 'staff.leaveDate')
)}
helperText={
getIn(touched, 'staff.leaveDate') &&
getIn(errors, 'staff.leaveDate')
}
/>
</Box>
</>
)}
<Box mt={3}>
<Button
variant="contained"
color="secondary"
type="submit"
disabled={isSubmitting}
>
{props.id ? 'Save Changes' : 'Add User'}
</Button>
<Button
onClick={props.closeentityform}
variant="contained"
color="secondary"
disabled={isSubmitting}
>
Cancel
</Button>
</Box>
</CardContent>
</Card>
</form>
)}
</Formik>
Related