225 lines
9.1 KiB
TypeScript
225 lines
9.1 KiB
TypeScript
import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
|
|
import { useFormik } from "formik";
|
|
import * as yup from "yup";
|
|
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
|
|
|
|
interface FormValues {
|
|
maritalStatus: string;
|
|
numberOfChildren: string;
|
|
ages: string;
|
|
occupation: string;
|
|
hoursPerWeek: number | string;
|
|
employer: string;
|
|
businessPhone: string;
|
|
spouseName: string;
|
|
spouseEmployer: string;
|
|
spouseBusinessPhone: string;
|
|
emergencyContact: string;
|
|
relationship: string;
|
|
spousePhone: string;
|
|
}
|
|
|
|
const validationSchema = yup.object({
|
|
maritalStatus:yup.string().required("Marital Status is required"),
|
|
numberOfChildren:yup.string().required("Full name is required"),
|
|
ages:yup.string().required("Full name is required"),
|
|
occupation:yup.string().required("Occupation is required"),
|
|
// hoursPerWeek: yup.number().required('Required'),
|
|
// employer:yup.string().required("Full name is required"),
|
|
// businessPhone:yup.string().required("Full name is required"),
|
|
spouseName:yup.string().required("Spouse name is required"),
|
|
// spouseEmployer:yup.string().required("Full name is required"),
|
|
// spouseBusinessPhone:yup.string().required("Full name is required"),
|
|
emergencyContact:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
|
|
relationship:yup.string().required("Relationship is required"),
|
|
spousePhone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
|
|
});
|
|
|
|
export default function FamilyFormSection(){
|
|
const formik = useFormik<FormValues>({
|
|
initialValues:{
|
|
maritalStatus:'',
|
|
numberOfChildren:'',
|
|
ages:'',
|
|
occupation:'',
|
|
hoursPerWeek:'',
|
|
employer:'',
|
|
businessPhone:'',
|
|
spouseName:'',
|
|
spouseEmployer:'',
|
|
spouseBusinessPhone:'',
|
|
emergencyContact:'',
|
|
relationship:'',
|
|
spousePhone:''
|
|
},
|
|
validationSchema,
|
|
onSubmit:(values)=>{
|
|
console.log(values);
|
|
}
|
|
})
|
|
return(
|
|
<>
|
|
<form onSubmit={formik.handleSubmit}>
|
|
<Grid container direction="row">
|
|
<Grid item xs={8} className='collapsable-form-style ' sx={{paddingLeft:"14px"}}>
|
|
<FormControl>
|
|
<FormLabel>Marital Status</FormLabel>
|
|
<RadioGroup
|
|
aria-labelledby="demo-radio-buttons-group-label"
|
|
defaultValue="married"
|
|
name="maritalStatus"
|
|
onChange={formik.handleChange}
|
|
value={formik.values.maritalStatus}
|
|
sx={{display:'flex', flexDirection:'row'}}
|
|
>
|
|
<FormControlLabel value="married" control={<Radio />} label="Married" />
|
|
<FormControlLabel value="single" control={<Radio />} label="Single" />
|
|
<FormControlLabel value="widowed" control={<Radio />} label="Widowed" />
|
|
<FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
|
|
<FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
|
|
</RadioGroup>
|
|
{formik.touched.maritalStatus && formik.errors.maritalStatus ? (
|
|
<div>{formik.errors.maritalStatus}</div>
|
|
) : null}
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Grid item xs={4} className='collapsable-form-style textfield-padding'></Grid>
|
|
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
|
<TextField
|
|
required
|
|
variant="filled"
|
|
label="Number of Children/Ages"
|
|
className='collapsable-form-style'
|
|
name='numberOfChildren'
|
|
onChange={formik.handleChange}
|
|
value={formik.values.numberOfChildren}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
|
|
helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
|
<TextField
|
|
required
|
|
variant="filled"
|
|
label="Occupation"
|
|
className='collapsable-form-style'
|
|
name='occupation'
|
|
onChange={formik.handleChange}
|
|
value={formik.values.occupation}
|
|
onBlur={formik.handleBlur}
|
|
error={formik.touched.occupation && Boolean(formik.errors.occupation)}
|
|
helperText={formik.touched.occupation && formik.errors.occupation}
|
|
/>
|
|
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
|
<TextField
|
|
variant="filled"
|
|
label="Hours/Week"
|
|
type="number"
|
|
className='collapsable-form-style'
|
|
name='hoursPerWeek'
|
|
onChange={formik.handleChange}
|
|
value={formik.values.hoursPerWeek}
|
|
onBlur={formik.handleBlur}
|
|
/>
|
|
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
|
<TextField
|
|
variant="filled"
|
|
label="Employer"
|
|
className='collapsable-form-style'
|
|
name='employer'
|
|
onChange={formik.handleChange}
|
|
value={formik.values.employer}
|
|
onBlur={formik.handleBlur}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
|
<TextField
|
|
variant="filled"
|
|
label="Business Phone"
|
|
type="tel"
|
|
className='collapsable-form-style'
|
|
name='businessPhone'
|
|
onChange={formik.handleChange}
|
|
value={formik.values.businessPhone}
|
|
onBlur={formik.handleBlur}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
|
<TextField
|
|
variant="filled"
|
|
label="Spouse's Name"
|
|
className='collapsable-form-style'
|
|
name='spouseName'
|
|
onChange={formik.handleChange}
|
|
value={formik.values.spouseName}
|
|
onBlur={formik.handleBlur}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
|
<TextField
|
|
variant="filled"
|
|
label="Spouse's Employer"
|
|
className='collapsable-form-style'
|
|
name='spouseEmployer'
|
|
onChange={formik.handleChange}
|
|
value={formik.values.spouseEmployer}
|
|
onBlur={formik.handleBlur}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
|
<TextField
|
|
variant="filled"
|
|
label="Business Phone"
|
|
type="tel"
|
|
className='collapsable-form-style'
|
|
name='spouseBusinessPhone'
|
|
onChange={formik.handleChange}
|
|
value={formik.values.spouseBusinessPhone}
|
|
onBlur={formik.handleBlur}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
|
<TextField
|
|
variant="filled"
|
|
label="Emergency Contact"
|
|
className='collapsable-form-style'
|
|
name='emergencyContact'
|
|
onChange={formik.handleChange}
|
|
value={formik.values.emergencyContact}
|
|
onBlur={formik.handleBlur}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
|
<TextField
|
|
variant="filled"
|
|
label="Relationship"
|
|
className='collapsable-form-style'
|
|
name='relationship'
|
|
onChange={formik.handleChange}
|
|
value={formik.values.relationship}
|
|
onBlur={formik.handleBlur}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
|
<TextField
|
|
variant="filled"
|
|
label="Spouse's Phone" type="tel"
|
|
className='collapsable-form-style'
|
|
name='phone'
|
|
onChange={formik.handleChange}
|
|
value={formik.values.spousePhone}
|
|
onBlur={formik.handleBlur}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</form>
|
|
</>
|
|
)
|
|
};
|