react-final-form-arrays
react-final-form-arrays copied to clipboard
Form level validation trumps field level validation when it should not
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.