CODEWITHSUNDEEP
reactjsreact-hook-form
NicoleZ
NicoleZ

Reputation: 1780

React Hook Form error messages not updating correctly with dynamic fields

I'm using React Hook Form with dynamic fields for teams. While the validation works and displays errors correctly upon submit, the error messages don't disappear when I correct the input. Here's the relevant code:

const formSchema = z.object({
  name: z.string().min(1, 'Please enter a name'),
  team: z.array(
    z.object({
      name: z.string().min(1, 'Please enter a name'),
      role: z.string().min(1, 'Please enter a role'),
    })
  ).max(10).optional(),
});

const formMethods = useForm<FormValues>({
    defaultValues: {
      ...defaultValues,
    } as FormValues,
    validationResolver,
    validationContext: formSchema,
  });

const {
    fields: teamFields,
    append: appendTeamFields,
    remove: removeTeamFields,
  } = useFieldArray({ name: 'team', control: formMethods.control });

Temeplate

{teamFields.map((_, idx) => (
  <div key={idx}>
    <input
      name={`team[${idx}].name`}
      ref={formMethods.register(`team[${idx}].name`)}
    />
    <input
      name={`team[${idx}].role`}
      ref={formMethods.register(`team[${idx}].role`)}
    />
    {formMethods.errors?.team?.[idx]?.name && 
      <span>
        {formMethods.errors.team[idx].name.message}
      </span>
    }
    {formMethods.errors?.team?.[idx]?.role && 
      <span>
        {formMethods.errors.team[idx].role.message}
      </span>
    }
  </div>
))}

Im using react-hook-form": "^5.7.2", If I submit with errors, they display correctly. After correcting the input, the error messages remain displayed until I submit again.

Upvotes: 0

Views: 1608

Answers (2)

Arlle Brasil
Arlle Brasil

Reputation: 176

I think you are missing to write an ".", on registration of you team fields.

{teamFields.map((_, idx) => (
  <div key={idx}>
    <input
      name={`team.${idx}.name`}
      ref={formMethods.register(`team.${idx}.name`)}
    />
    <input
      name={`team.${idx}.role`}
      ref={formMethods.register(`team.${idx}.role`)}
    />
    {formMethods.errors?.team?.[idx]?.name && 
      <span>
        {formMethods.errors.team[idx].name.message}
      </span>
    }
    {formMethods.errors?.team?.[idx]?.role && 
      <span>
        {formMethods.errors.team[idx].role.message}
      </span>
    }
  </div>
))}

I think that you could omit the "name" parameter of the inputs fields since you are using the "register" function. I think it injects the name parameter by default.

Upvotes: 0

Oki
Oki

Reputation: 3240

What version of react-hook-form is this? I can't see that it returns errors directly in formMethods. They are inside formState.

It is explained in the documentation when the validation get triggered. https://react-hook-form.com/docs/useform#mode . It is on submit. You can change it to onChange

Upvotes: 0

Related Questions