CODEWITHSUNDEEP
reactjsreact-hook-formyup
Ubeydullah Yılmaz
Ubeydullah Yılmaz

Reputation: 117

react-hook-form yup schema useFieldArray validation error message not go away

I want to validate the dynamic form I made using react-hook-form useFieldArray with yup resolver.

This is how I set up my schema.


const schema = yup.object().shape({
    type_of_transports_details: yup.array().of(
        yup.object().shape({
            count: yup.number().nullable().typeError('Sayısal bir değer giriniz.').required("Taşıma sayısı alanı zorunludur, lütfen giriş yapınız."),
            price: yup.number().nullable().typeError('Sayısal bir değer giriniz.').required("Fiyat alanı zorunludur, lütfen giriş yapınız."),
            total: yup.number().nullable().typeError('Sayısal bir değer giriniz.').required("Toplam alanı zorunludur, lütfen giriş yapınız."),
        })
    ),
});

const {
    control,
    register,
    handleSubmit,
    formState: { errors },
    setValue,
    getValues,
    reset,
    setFocus,
    clearErrors,
    resetField,
    setError,
    watch,
} = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
        upload_addresses: [{
            company_name: "",
            code: "",
            city: "",
            country: "",
            address: "",
            detail: "",
        }],
        type_of_the_transport_details: [{
            transport_type: "",
            count: "",
            currency_name: "",
            currency_value: "",
            price: "",
            total: "",
        }],
    }
});

const { 
    fields: transportFields, 
    append: transportAppend, 
    remove: transportRemove, 
    update: transportUpdate 
} = useFieldArray({
    control,
    name: "type_of_transports_details",
});

my form

{
    transportFields.map((field, index) => {
        return (
            <tr key={field.id} style={{ backgroundColor: "#E8EAE6" }}>
                <td className="tablelj align-middle">
                    <label htmlFor="numberOfTransports" className="form-label">{field.type} TAŞIMA TİPİ ÜCRETLERİ</label>
                </td>
                <td>
                    <div className="row">
                        <div className="col-lg col-12">
                            <input
                                type="number"
                                className="form-control"
                                placeholder="Taşıma Sayısı"
                                {...register(`type_of_transports_details.count.${index}`)}
                            />
                            {errors?.type_of_transports_details?.[index]?.count?.message}
                        </div>
                    </div>
                </td>
            </tr>
        )
    })
}

errors

The error messages do not go away even though I enter data. Besides, it gets stuck in validation even though I submit full data. I can't get rid of validation. When I do clearErrors on the input's onchange, it doesn't respond.

My errors error_log

Upvotes: 2

Views: 6417

Answers (2)

Ubeydullah Yılmaz
Ubeydullah Yılmaz

Reputation: 117

I changed my input name from this:

<input
    type="number"
    className="form-control"
    placeholder="Taşıma Sayısı"
    {...register(`type_of_transports_details.count.${index}`)}
/>

to this

<input
    type="number"
    className="form-control"
    placeholder="Taşıma Sayısı"
    {...register(`type_of_transports_details.${index}.count}`)}
/>

and it worked correctly.

Upvotes: 3

Arman
Arman

Reputation: 811

using hook-form mode onChange should solve your problem.

useForm({
  ...
  mode: 'onChange',
  ...
)}

You also need to include transportFields in defaultValue too.

defaultValues: {
        ...,
        transportFields: transportFields
    }

Upvotes: 1

Related Questions