react-final-form-arrays icon indicating copy to clipboard operation
react-final-form-arrays copied to clipboard

Form level validation trumps field level validation when it should not

Open joukosaastamoinen opened this issue 4 years ago • 0 comments

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

When a field inside a <FieldArray /> is validated both at form level (using <Form validate={...} />) and at field level (using <Field validate={...} />), field level validation is always ignored, even when form level validation returns undefined for a given field in the <FieldArray />.

What is the expected behavior?

If one of the validators (form or field level) returns an error for a field in a field array, the form should be rendered invalid.

Sandbox Link

https://codesandbox.io/s/stoic-fog-rcxru?file=/src/App.js

There should be a "required" error rendered next to the input, but instead no error is rendered. Removing the validate prop from <Form /> fixes this and the "required" error gets rendered.

What's your environment?

"final-form": "4.19.1",
"final-form-arrays": "3.0.2",
"react": "16.12.0",
"react-dom": "16.12.0",
"react-final-form": "6.4.0",
"react-final-form-arrays": "3.1.1",

Other information

The bug only seems to affect fields that are present in initialValues. When a field is added to the array after mount, the newly added field's validation seems to behave as expected.

joukosaastamoinen avatar May 07 '20 09:05 joukosaastamoinen