React Final Form - Handling Nested Field Arrays with Dynamic Validation
I've encountered a strange issue with I've looked through the documentation and I'm still confused about I've searched everywhere and can't find a clear answer. I'm currently using React Final Form (v6.5.3) to manage a complex form with nested field arrays for a multi-step user input process. The top-level form contains multiple sections, each with a field array where users can add or remove items. The tricky part is implementing dynamic validation for these nested fields based on user input. For instance, if one of the nested fields is filled based on a specific condition, I want to enforce a custom validation rule for the other fields in that array. However, I'm running into issues where the validation does not trigger as expected when the user modifies the outer fields. Here's a simplified version of my code: ```javascript import React from 'react'; import { Form, Field, FieldArray } from 'react-final-form'; const validateNestedFields = values => { const errors = {}; if (values.items) { values.items.forEach((item, index) => { if (!item.name && values.condition) { if (!errors.items) errors.items = {}; errors.items[index] = { name: 'Required' }; // Custom validation rule } }); } return errors; }; const MyForm = () => ( <Form onSubmit={formValues => console.log(formValues)} validate={validateNestedFields} render={({ handleSubmit }) => ( <form onSubmit={handleSubmit}> <Field name="condition" component="input" type="checkbox" /> Condition <FieldArray name="items"> {({ fields }) => ( <div> {fields.map((name, index) => ( <div key={name}> <Field name={`${name}.name`} component="input" placeholder="Item Name" /> <button type="button" onClick={() => fields.remove(index)}>Remove</button> </div> ))} <button type="button" onClick={() => fields.push({})}>Add Item</button> </div> )} </FieldArray> <button type="submit">Submit</button> </form> )} /> ); ``` When I test the form, if the checkbox for `condition` is unchecked, I can add items without any validation errors, but if I check it and add an item without a name, I expect to see a validation error for that item, but it just silently passes through the submit. I verified that the `validateNestedFields` function is being called, but it seems the errors are not being properly set. I've tried using `form.change` to force the form to re-evaluate the validation when the condition changes, but it didn't work as expected either. Is there a recommended way to handle this kind of scenario in React Final Form, particularly with nested arrays? Any insights on how to ensure that dynamic validation triggers correctly would be greatly appreciated! My development environment is Linux. How would you solve this? I'm working with Javascript in a Docker container on Linux. What am I doing wrong? This is for a web app running on Ubuntu 22.04.