Problem with Field Array Validation in Form

[yldshv]

Hello everyone, it's me again,

This time I have a new problem for which I can't find a solution. I hope you can help me as always. It might also be a bug.

When I have a form and use a field array within the form, with the fields in the array being required, adding a new item to the array does not consider the overall validity of the form.

For example, if I have filled out all fields in my form and it is valid, and then I add another item to the field array list (which contains required fields that are now empty), the form still remains valid overall.

Does anyone have any ideas or solutions for this?

Best regards,
Daniel

[rvsia]

Hello,

would it be possible to create a live example (code sandbox, stackblitz) to replicate the issue? 😊

Thanks

[yldshv]

Hi @rvsia ,

I tried to recreate the whole thing as closely as possible in a sandbox. If you look into your console, you should see what I mean.

CodeSandBox

[rvsia]

Thank you for providing this example.

I think there is an issue using the useEffect.

If you do only this, it works fine:

  const FieldListener = () => {
    const { valid } = useFormApi();

    console.log("valid", valid);

    return null;
  };

Also the submit is working correctly.

[yldshv]

@rvsia thank you. That helped tbh idk why we added that useEffect there xD