issue: FieldArray fields not listed in formState.errors

[tschumpr]

Version Number

7.48.2

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/fieldarray-validation-ww26zl?file=%2FformInput.js

Steps to reproduce

1. Open Codesandbox-Example
2. Click 'Add' Button

Expected behaviour

The newly displayed input fields from the FieldArray are taken into account in the save button state: As long as the fields are empty, the button is disabled. However, as long as the fields are empty, they should have a red background (as is the case with the input field "name", which uses the same FormInput component). When I check the formState.errors the fieldArray fields are not included.

What browsers are you seeing the problem on?

Chrome, Edge

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

I don't get your issue in here.

[Moshyfawn]

You're trying to reuse the same input component for both field array fields and plain/object fields (data.myValue vs data.values[0].myValue), which means that the form of the errors object will contain both objects and arrays.

In the same input component, you are trying to access the error field with formState.errors[fieldName], which will return undefined if it's an array field element.

I suggest you pass the background color or even the field error from the parent component instead to avoid adding more logic to handle different field types inside the reusable component.

[tschumpr]

I've updated the codesandbox example and hope this will help you understand my issue:

To reproduce it

1. Open sandbox example > Input field is red because it's required but empty. Save button is disabled ✅
2. Enter a text > Input field is no longer red, Save button is enabled ✅
3. Click Add > Two input fields are added to the field array. The validation is triggered (casingInput.js, line 34). Save button is disabled ✅. The input fields are not red (because they are not listed in formState.errors) ❌
4. Enter number values for the two input fields > Save button is enabled ✅
5. Delete value of any of the two fieldArray input fields > Save button is disabled ✅. The input field is red (it's listed in formState.errors) ✅

So the problem is the initial validation. The validation is triggered as can be seen in the state of the _save_button, but the results are not shown in formState.errors. Please let me know how to trigger the validation, so that the errors are listed from the beginning. Thanks.

[Moshyfawn]

Please see #11568 (comment)

[tschumpr]

@Moshyfawn Did you take a look at the updated code example? I've handled accessing errors from the fieldArray in formInput.hasErrors() and if you follow the steps I've provided above, you'll see that it does work in step 5, just not in step 3. If you stay with your answer from #11568 (comment) can you explain why it works in step 5, and explain in more detail or with a concrete example why it doesn't work in step 3?

[tschumpr]

@bluebill1049 @Moshyfawn I've reduced my example even further: https://codesandbox.io/p/sandbox/fieldarray-validation-forked-srkmdp?file=%2FTestFormStateError.js. There's no more custom component or colors to be set. The problem remains the same: When I append the fieldArray the new child-element with required-rule is considered for formState.isValid but not listet in formState.errors until I update the child's value

To reproduce:

1. Open https://codesandbox.io/p/sandbox/fieldarray-validation-forked-srkmdp?file=%2FTestFormStateError.js. and open console output > The required input "parent" is listed as an error because it's empty ✅. "Save" button is disabled (formState.isValid == false) ✅
2. Enter some text for "parent" > "parent" is no longer listed as an error ✅. "Save" button is enabled (formState.isValid == true) ✅
3. Click "Add" button > "required input "child" is not listed as an error ❌ but "Save" button is disabled (formState.isValid == false) ✅
4. Enter some text for "child" > no errors are listet ✅. "Save" button is enabled (formState.isValid == true) ✅
5. Clear "child" > "child" is listed as an error ✅. "Save" button is disabled (formState.isValid == false) ✅

Please let me know what is wrong in this set up or point me to the correct section in the documentation. I couldn't find anything.

testformstateerror.mp4

[tschumpr]

I've finally found the solution:

<Button
     onClick={(e) => {
          append({ fromDepth: "", toDepth: "" }, { shouldFocus: false });
         // calling formMethods.trigger here does nothing because the new fieldArray element has not yet been rendered. 
         // For some reason the validation and the generating of the errors appear to be not connected, because the validation 
         // works already by calling `append`
     }}
>

Hence we have to call trigger after rendering with useEffect:

  useEffect(() => {
    formMethods.trigger("fieldArray");
  }, [formMethods.getValues().fieldArray]);