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

Question

我正在尝试使用是的验证 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;

Answer 1

我解决了这个问题，方法是在 push 中放置一个空字段，这会给出必需的错误。

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