Nested form with subForm validation
The use case is something like having
user: {
firstName,
lastName,
address: { ... }
}
And i want to show the address on a separate form inside a modal. and its own front end validation, but when i click "save" it would copy the values to the parent form. Is here a proper API for this?
I assume it should be handled as a separate form to prevent the parent values from changing, then merged into the parent form with ... formState? is there an API to update multiple fields as once?
5 Replies
rare-sapphire•6mo ago
if the field is an object, you can set that too
in this case
setFieldValue('address', theNewAddressObject)
we do this in some cases where there are groups of related data (week-related, for example). The field only ever passes the week object over and it receives one backpassive-yellowOP•6mo ago
what if it's just a subset of my parent form, i see
mergeForm on the API list (without examples) does this work or do i iterate each field with setFieldValuerare-sapphire•6mo ago
there isn‘t one that is independent of the upper form yet, but
withForm can subsidize part of the formpassive-yellowOP•6mo ago
yea that's what i was looking at initially but it wasnt clear that the sub-form "submit" submits the whole form or would merge it into the parent. i.e. if it was just to split the rendering across components but child form would automatically update parent form at any point (which is what is seems like)
rare-sapphire•6mo ago
withForm basically allows you to create a wrapper that infers the correct form property to pass to it.
whether it's just a list of fields that should be inserted into another form, or if it's its own form entirely is up to you