How to validate dynamic fields of fieldArray in Formik with Yup onSubmit

[shyamsukhamit]

I am trying to validate Formik FieldArray with Yup, it does validate the initial fields , but does not validate the dyanmically generated one even if they are required.

Errormessage is only displayed in case of dyanmically generated one's when I click (2nd row insurance_company)on it and remove!

I am new to Reactjs/Formik world, any help is appreciated.

Image is in this link

`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;
`

[Pkp07]

Same here, only first array items getting validation messages, not after that in field array. @shyamsukhamit if you got the answer, please post here.

[shyamsukhamit]

@Pkp07
take a look at this https://stackoverflow.com/questions/67089319

[Pkp07]

@shyamsukhamit
thanks for quick response, in my case, dynamic fields are generated based on api results, i solved it by creating array of objects of same length in initialValues, that solved my issue.