Validation not working in useArrayField

[satinder1624]

Hello guys,

I am using useField array and I am mapping an input where I am assigning a required true but still I am unable to get error object. Could Someone please look into my code?

import React, { useEffect, useState } from 'react'
import { useFieldArray, useForm } from 'react-hook-form';

export default function Agents({setError, setValue, getValues, watch, register, control, errors}) {
// console.log("Errors ->", errors?.agents)

const agentsValues = getValues().agents
const watchIntitalAgentType = watch('agents[0].agentType');
const [watchSecondAgentType, setWatchSecondAgentType] = useState(watch('agents[1].agentType'))

const { fields, append, remove, } = useFieldArray({
control,
name: 'agents',
});

const defaultOptions = [
{ value: "undefined", label: 'Select Agent Type'},
{ value: 'buyersAgent', label: "Buyer's Agent" },
{ value: 'dualAgent', label: "Dual Agent" },
];

const buyersAgentOptions = [
// { value: "undefined", label: 'Select Agent Type'},
{ value: 'buyersTransactionalCo', label: "Buyers Transactional Co" },
{ value: 'buyersCoAgent', label: "Buyers Co-Agent" },
];

const dualAgentOptions = [
// { value: "undefined", label: 'Select Agent Type'},
{ value: 'dualTransactionCo', label: "Dual Transaction Co" },
{ value: 'dualCoAgent', label: "Dual Co-Agent" },
];

// Agent Type
const renderingAgentType = {
buyersAgent: buyersAgentOptions,
dualAgent: dualAgentOptions,
}

const renderingOptions = renderingAgentType[watchIntitalAgentType]
const firstValue = renderingOptions?.[0]?.value

useEffect(() => {
if(fields.length > 2){
setWatchSecondAgentType(watch('agents[1].agentType'))
}
}, [watchIntitalAgentType, fields])

console.log("Errors ->", errors)

useEffect(() => {
register("agents[0].agentType", {required: 'Agent type should be selected at first'});
}, [register]);

const validateAgentType = (selectedValue) => {
const defaultValue = defaultOptions[0].value;
if (selectedValue === defaultValue) {
return 'Please select a valid agent type';
}
return true; // Return true for valid selection
};

const validateNameAgent = (selectedValue) => {
console.log("I am here")
if (selectedValue === 'Hey') {
return 'Please select a valid agent type';
}
return true; // Return true for valid selection
}

useEffect(() => {
validateNameAgent()
}, [fields])

// const nestedValidateAgentType = (newSelectedValue) => {
// const defaultValue = defaultOptions[0].value;
// if (newSelectedValue === defaultValue) {
// return 'Please select a valid agent type 2';
// }
// return true; // Return true for valid selection
// }

return (

1} {...register('agents[0].agentType', { validate: validateAgentType, // Use the custom validation function required: true })} > {defaultOptions?.map((option) => ( {option.label} ))}
<input
{...register(agents[0].agentFirstName, {required: 'Please select agent first name'})}
placeholder="agnets's First Name"
/>
<input
{...register(agents[0].agentLastName, {required: 'Please select agent last name'})}
placeholder="agnets's Last Name"
/>

{console.log("Fields", fields)}
{fields.map((element, index) => (
index > 0 ? (

<select
disabled={!(fields.length - 1 === index)}
{...register(agents[${index}].agentType)}
>
{renderingOptions
?.map((option) => (
<>
{console.log("Option ->", option)}

{option.label}

</>
))}

<input
placeholder="Agnets's First Name"
{...register(agents[${index}].agentFirstName, {
validate: (value) => {
if (value === '') {
return 'Agent first name is required';
}
return true;
},
required: 'Agent first name is missing at some index'
})}
/>
<input
placeholder="Agnets's Last Name"
{...register(agents[${index}].agentLastName, {required: 'agent last name is missing at some index'})}
/>
<button type="button" onClick={() => remove(index)}>
Remove Agent

) : null
))}
{
fields.length === 3 ? null : (
<button
type="button"
onClick={() => {
append({agentFirstName: '', agentLastName: '', agentType: firstValue });
}}
disabled={errors?.agents?.length > 0}
// disabled={noSelectionCondition?.includes(true) ? true : false}
>
Add another Agent

)
}

)
}

[leapful]

@satinder1624

Please provide a codesandbox url to re-produce the issue.