Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Validation triggering on useFieldArray append

See original GitHub issue

Describe the bug

I have a custom component which handle’s a useFieldArray. It supports the adding of additional fields using the append function. However, upon pressing append validation is triggered for the entire form.

You’ll see I’m passing errors to display some labels and these are shown on appending.

I’ve tried using a defaultValue for the input (see commented out line 41 in ArrayInput.tsx), but I am unable to run: Property 'value' does not exist on type 'Record<"id", string>'.

I’ve tired loosening the typing with some any usage, but this has no effect.

To Reproduce Steps to reproduce the behavior:

Click on either ‘Add another’
Validation is triggered for form and error labels are shown.

Codesandbox link (Required) https://codesandbox.io/s/usefieldarray-error-uknm4?file=/src/ArrayInput.tsx

Expected behavior Validation doesn’t happen until submit is pressed.

Desktop (please complete the following information):

Browser Chrome
Version 88

Issue Analytics

State:
Created 2 years ago
Comments:10 (6 by maintainers)

Top GitHub Comments

1reaction

cjhinescommented, Apr 21, 2021

Ah, such a small oversight! thank you very much @bluebill1049

0reactions

bluebill1049commented, Apr 21, 2021

np.

Top Results From Across the Web

[useFieldArray] validation does not work properly on append ...

Steps to reproduce the behavior: Go to the sandbox link below and change the number value to -1. You will see that this...

useFieldArray - Simple React forms validation

Append input/inputs to the end of your fields and focus. The input value will be registered during this action. Important: append data is...

React-hook-form: Trigger field validation through all field array ...

I have a field array like this: const { append, remove, fields } = useFieldArray<CampaignFormValues, 'assortmentNeeds'>({ name: ...

useFieldArray - VeeValidate

useFieldArray is a custom composition API function that allows you to manage repeatable fields and forms entries and provides common operation helpers.

react-hook-validate-trigger - CodeSandbox

triggerValidation,. watch,. errors,. formState. }) => {. const { fields, append, remove } = useFieldArray({. control,. name: "test". } ...