React-final-form: Support for Nested Forms?

Created on 12 Jun 2018  路  6Comments  路  Source: final-form/react-final-form

Is it supported to have nested forms? For instance, a form where a field itself is a form.

I intend to make certain fields editable via a "popup" portal, where the popup itself is managed by a form. When you "submit" the nested form, the field updates.

However, it seems that the new FormState api is leaking into nested forms.

Most helpful comment

I am trying to do the exact same thing.

I intend to make certain fields editable via a "popup" portal, where the popup itself is managed by a form. When you "submit" the nested form, the field updates.

The issue I'm getting into is that the onSubmitCustom (inner form) triggers for both the onSubmit for the inner form and the onSubmit for the outer form.

All 6 comments

Sounds fairly similar to the Wizard Form example. Note how an outer container is managing each submit of the values in the "sub forms".

My intended use case is more complicated than that...

It's supposed to be a form, where one of the fields is a sortable table. When you click one of the rows, a new form pops out, allowing you to edit the row. Not to mention one of the fields on that row is itself a table, which is editable the same way...

I guess it's unsupported, but I used to get it to work. Not sure what caused it to break. I think it's to do with context (the inner forms accidentally receiving the context of the outer form)

I am trying to do the exact same thing.

I intend to make certain fields editable via a "popup" portal, where the popup itself is managed by a form. When you "submit" the nested form, the field updates.

The issue I'm getting into is that the onSubmitCustom (inner form) triggers for both the onSubmit for the inner form and the onSubmit for the outer form.

Published fix in v3.6.3.

See this working example

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings