如何使用 Yup onSubmit 在 Formik 中验证 fieldArray 的动态字段

问题描述

我正在尝试使用 Yup 验证 Formik FieldArray，它确实验证了初始字段，但即使需要它们也不会验证动态生成的字段。

错误信息仅在动态生成的情况下显示，当我点击（第二行 insurance_company）并删除时！

我是 Reactjs/Formik 世界的新手，感谢您的帮助。

 
 


function VehicleForm(props) {

    const { data,update,manuf,vmodel,vcat } = props

     


    const initialValues = {

        vehicle_manufacturer: data?.vehicle_manufacturer || 1,vehicle_category: data?.vehicle_category || 1,vehicle_model: data?.vehicle_model || 1,origin_country: data?.origin_country || 1,insurance_details_array: [{ policy_number: "",insurance_company: "",insured_amount: "",insurance_expiry: "",premium_term: "" }],}



     

    const validationSchema = Yup.object({

        vehicle_manufacturer: Yup.string().required("required"),vehicle_category: Yup.string().required("required"),vehicle_model: Yup.string().required("required"),insurance_details_array: Yup.array(Yup.object({

            policy_number: Yup.string().required("required"),insurance_company: Yup.string().required("required"),insured_amount: Yup.number().required("required"),insurance_expiry: Yup.string().required("required"),premium_term: Yup.number().required("required")
        })).required("required"),})

    const onSubmit = async (values,formik) => {
 
    }


 
    return (<>

        <Formik

            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={onSubmit}

        >


            {
                formik => {


                    

                    return (
                        <div className="container">
                            <Form >
                                <div className="row" >

                                    <div className="col-md-6">
                                        <FormikControl controls="select" name="vehicle_manufacturer" label="Vehicle Manufacturer" options={manuf.manuf} extraclass="" className="form-control" />


                                    </div>
                                    <div className="col-md-6">

                                        <FormikControl controls="select" name="vehicle_category" label="Vehicle Category" options={vcat.vcat} extraclass="" className="form-control" />
                                    </div>

                                </div>
                                <div className="row" >
                                    <div className="col-md-6">


                                        <FormikControl controls="select" name="vehicle_model" label="Vehicle Model" options={vmodel.vmodel} extraclass="" className="form-control" />
                                    </div>
                                    <div className="col-md-6">



                                        {/* <FormikControl controls="select" name="origin_country" label="Origin Country" options={dropdown} extraclass="" className="form-control" /> */}

                                        <Country name="origin_country" label="Origin Country" extraclass="form-control" />
                                    </div>
                                </div>
                                

                                <div className="col-md-12">

                                    <label>Insurance Details</label>

                                    <FieldArray name="insurance_details_array">

                                        {
                                            (fieldsArrayProps2) => {

                                                const { push,remove,form } = fieldsArrayProps2
                                                const { values } = form
                                                const { insurance_details_array } = values

                                                return (
                                                    <div>
                                                        {
                                                            values.insurance_details_array.map((ins_d,index) => (

                                                                <div className="row" key={index}>


                                                                    <div className="col-md-2" >

                                                                        <FormikControl className="form-control" placeholder="policy_number" name={`insurance_details_array.${index}.policy_number`} controls="input" id={`insurance_details_array.${index}.policy_number`} />

                                                                    </div>

                                                                    <div className="col-md-2" >



                                                                        <FormikControl className="form-control" placeholder="insurance_company" name={`insurance_details_array.${index}.insurance_company`} controls="input" id={`insurance_details_array.${index}.insurance_company`} />

                                                                    </div>
                                                                    <div className="col-md-2" >

                                                                        <FormikControl className="form-control" placeholder="insured_amount" name={`insurance_details_array.${index}.insured_amount`} controls="input" id={`insurance_details_array.${index}.insured_amount`} />
                                                                    </div>
                                                                    <div className="col-md-2" >

                                                                        <FormikControl className="form-control" placeholder="insurance_expiry" name={`insurance_details_array.${index}.insurance_expiry`} controls="date" id={`insurance_details_array.${index}.insurance_expiry`}    />


                                                                    </div>

                                                                    <div className="col-md-2" >

                                                                        <FormikControl className="form-control" placeholder="premium_term" name={`insurance_details_array.${index}.premium_term`} controls="input" id={`insurance_details_array.${index}.premium_term`} />


                                                                    </div>

                                                                    <div className="col-md-2" >

                                                                        {
                                                                            index > 0 ? <button type="button" onClick={() => remove({ index })} className="btn btn-primary  "  >-</button> : ""
                                                                        }

                                                                        <button type="button" onClick={() => push("")} className="btn btn-primary m-1"  >+</button>
                                                                    </div>

                                                                </div>

                                                            ))
                                                        }

                                                    </div>
                                                )



                                            }
                                        }

                                    </FieldArray>






                                </div>



                                              <div className="row">

                                    <button type="submit" className="btn btn-primary">Submit</button>
                                </div>

                            </Form>
                        </div>
                    )
                }
            }



        </Formik>




    </>)






}

export default VehicleForm;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）