mobx-react-form
mobx-react-form copied to clipboard
How to keep field defaults updated to current values?
Say I have a form that's mapped to a model's fields. After submitting the form I want the dirty fields to be updated so that the saved values are no longer considered dirty. As far as I can tell, I need to update the field defaults to the saved values. With nested fields it gets pretty cumbersome because I can't just do something like form.update_defaults(saved_values). How can I easily map my model's updated values back onto the field defaults after a save?
Say with a schema like this:
fields = [ name: {}, email: {}, address: { fields: [{ line1: {}, line2: {}, city: {}, ... }] ]
In onSuccess() I can do form.values() to get all the dirty values, and after saving successfully I can do something like _assign(myModel, values) to update my model to the new values. But I can't see an easy way to get the new values into each field's defaults without some weird iteration and name mangling. Am I misunderstanding something about this workflow?
I think you need .set('default', { ... })
Aha, that does seem to work, thanks! I didn't understand what those functions did from the documentation. I just changed it to:
form.set('default', values)
It seems that set('defaults', values) does not trigger a field's input converter to run. If I do field.default = value
then my input converter runs, but if I do form.set('defaults', values)
the default value ends up as a pre-converted object instead, which means the field thinks it's dirty again (since field.value does not equal field.default). Am I still doing something wrong?
Note that you have to use default
and not defaults
.
I don't know if I don't understood your message, but I would do just:
form.set('default', form.values())
Oops, that was just a typo on my end. It is default
and not defaults
. The problem is that if the default is set using form.set()
, it does not have the field's input
function applied to it, but doing field.default = value
does apply the input
function. This might be related to #337?
i have: const formHash = { fields: [ "id", "rank", "images", "images[].id", "images[].rank", "images[].imageUrl", "images[].image", "images[].isMain" ],
when i set values, if the values not have "images[].image"
field in it, i can't display image field. it says: The selected field is not defined (image)
newStyleForm = new Form({ ...formHash, values })