reactjs 使用 Yup 验证 对 表单 中 的 选择 字段 以及 formik 进行 验证 时 出现 问题

68bkxrlz  于 2022-11-22  发布在  React
关注(0)|答案(1)|浏览(197)

我有一个问题的选择字段在一个表单与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);
vkc1a9a2

vkc1a9a21#

嘿,不确定,但也许尝试这个为您的选择领域,也许它的工作

yup.string().ensure().required("required!")

相关问题