我有一个问题的选择字段在一个表单与Formik的验证。该页有文本和选择字段。我试图验证该页使用是的,文本字段被验证成功,但选择字段没有验证使用相同的方法。有人能帮助我解决这个问题吗?
This is my form looks like;
import { Button, Card, Container, Grid } from "@mui/material";
import { FormController, I18n } from "common/components";
import { Form, withFormik } from "formik";
import React, { useEffect } from "react";
import { connect, useDispatch } from "react-redux";
import * as Yup from "yup";
import { ClearUlb, getAddUlbDetails, getUlbCategorySelect, getUlbDistrictSelect, getUlbStateSelect } from "../actions";
import { useParams } from "react-router-dom";
import { getCategoryDropdownSelect, getDistrictDropdownSelect, getStateDropdownSelect, getUlbListForm } from "../selectors";
import { actions as sliceActions } from "../slice";
import { createStructuredSelector } from "reselect";
const UlbMasterDetailsAdd = (props) => {
const dispatch = useDispatch();
const { id = null } = useParams();
useEffect(() => {
dispatch(getUlbStateSelect());
dispatch(getUlbDistrictSelect());
dispatch(getUlbCategorySelect());
if (id) {
// dispatch(getUlbById(id));
}
return () => dispatch(ClearUlb());
}, [id]);
const containerStyles = {
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItem: "center",
margin: "auto",
padding: "100px",
marginLeft: "100px",
marginRight: "100px"
};
const formStyle = {
padding: "20px"
};
return (
<Card sx={containerStyles}>
<Container maxWidth="md">
<Form>
<Grid container>
<Grid item xs={6} sx={formStyle}>
<FormController
control="select"
label="State"
name="state"
options={props.stateDropdown.data || []}
/>
</Grid>
<Grid item xs={6} sx={formStyle}>
<FormController
control="select"
label="District"
name="district"
options={props.selectDistrict.data || []}
/>
</Grid>
<Grid item xs={6} sx={formStyle}>
<FormController
control="input"
type="text"
label="ULB Code"
name="ulbCode"
/>
</Grid>
<Grid item xs={6} sx={formStyle}>
<FormController
control="input"
type="name"
label="ULB Name"
name="ulbName"
/>
</Grid>
<Grid item xs={6} sx={formStyle}>
<FormController
control="select"
label="ULB Category"
name="ulbCategory"
options={props.selectCategory.data || []}
/>
</Grid>
</Grid>
<Grid sx={{ display: "flex", justifyContent: "center", padding: "20px" }}>
{id && <Button
variant="contained"
type="submit"
>
{I18n("update")}
</Button>}
{!id && <Button
variant="contained"
type="submit"
>
{I18n("submit")}
</Button>}
</Grid>
</Form>
</Container>
</Card>
);
};
const mapStateToProps = createStructuredSelector({
ulbListForm: getUlbListForm,
stateDropdown: getStateDropdownSelect,
selectDistrict: getDistrictDropdownSelect,
selectCategory: getCategoryDropdownSelect
});
const mapDispatchToProps = (dispatch) => ({
setStoredValue: (data) => dispatch(sliceActions.setUlbListFormData(data)),
submitValue: (data) => dispatch(getAddUlbDetails(data))
});
const validationSchema = Yup.object({
state: Yup.object().required("Required"),
district: Yup.object().required("Required"),
ulbCode: Yup.string().required("Required"),
ulbName: Yup.string().required("Required"),
ulbCategory: Yup.object().required("Required")
});
const addUlbList = withFormik({
validationSchema,
enableReinitialize: true,
mapPropsToValues: (props) => {
return props?.ulbListForm;
},
handleSubmit: (values, { props }) => {
props.submitValue(values);
},
displayName: "addUlbList"
})(UlbMasterDetailsAdd);
export default connect(mapStateToProps, mapDispatchToProps)(addUlbList);
这是我的列表表单目前的状态。它没有完成,我只添加了添加,编辑和删除按钮。
import { Button, Card, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Grid } from "@mui/material";
import { withFormik } from "formik";
import React from "react";
import { connect } from "react-redux";
import { useNavigate } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { getUlbListForm } from "../selectors";
import { actions as sliceActions } from "../slice";
let apiTableData = [
{ id: 1, data: "test1" },
{ id: 2, data: "test2" },
{ id: 3, data: "test3" }
];
const UlbMasterList = () => {
const navigate = useNavigate();
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<Grid>
<Button
onClick={() => navigate("/admin/ulb-master-details/add")}
variant="outlined"
>
Add
</Button>
{apiTableData.map(({ id }, index) => {
return (
<Card key={index}>
<Button
onClick={() =>
navigate(`/admin/ulb-master-details/${id}`)
}
type="edit"
variant="outlined"
>
Edit
</Button>
<Button onClick={handleClickOpen}
variant="outlined">
Delete
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Confirmation"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Do you want to delete this?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleClose} autoFocus>
Ok
</Button>
</DialogActions>
</Dialog>
</Card>
);
})}
</Grid>
);
};
const mapStateToProps = createStructuredSelector({
ulbListForm: getUlbListForm
});
const mapDispatchToProps = (dispatch) => ({
setStoredValue: (data) => dispatch(sliceActions.setUlbListFormData(data))
});
const editUlbList = withFormik({
enableReinitialize: true,
mapPropsToValues: (props) => {
return props?.ulbListForm?.data;
},
// validate,;
handleSubmit: ({ setSubmitting }) => {
// console.log(JSON.stringify(values));
setSubmitting(false);
},
displayName: "editUlbList"
})(UlbMasterList);
export default connect(mapStateToProps, mapDispatchToProps)(editUlbList);
1条答案
按热度按时间vkc1a9a21#
嘿,不确定,但也许尝试这个为您的选择领域,也许它的工作