defaultValue and defalutState.value
Hi guys, I have question regarding filling up initial form values
While using form I had this expectation for my needs:
defaultValue: the 'empty' value of each field, for example when there is no defaultState.value the defaultValue is used as initial value or when user resets the form the defaultValue is used
defaultState.value: the 'initial' value for each field, for example when I want to prefill certain fields or load the values from datasource for 'edit mode'.
However when I fill both defaultValue and defaultState.value, defaultState.value is ignored and only defaultValue is used.
Is there any api or recommended method existing to provide what I want? or if not maybe I or someone could propose spec for it.
5 Replies
extended-salmon•3mo ago
It sounds like double the work. You have initial values for each field, but you then want different default values for each field?
Perhaps you're looking for this section in the docs: https://tanstack.com/form/latest/docs/framework/vue/guides/async-initial-values
Async Initial Values | TanStack Form Vue Docs
Let's say that you want to fetch some data from an API and use it as the initial value of a form. While this problem sounds simple on the surface, there are hidden complexities you might not have thou...
quickest-silverOP•3mo ago
Oh that's not what I meant.
The initial value is used for both 'filling up initial values' and 'the target value when field or form is resetted', but sometimes I wanted different vales for each case.
For example If I load a saved form and there's 'reset form' functionality, I expect the reset form function to wipe out all fields not resetting them to the saved state.
extended-salmon•3mo ago
resetting the form is not wiping out the values, it's resetting to the initial state that it started out from. You can pass new values as parameter to
form.reset() to let it know what the new expected values should be (empty ones in your case)
Take your example of a saved form that you wish to be resettable.
You would have an object that represents the empty form and the form that you currently store. When 'clearing progress', you would pass the empty form as parameter to the form.resetquickest-silverOP•3mo ago
That's what I asked for, separating the 'initial state' and 'default empty state'.
But you are right I can provide reset values to form.reset tho I would prefer my suggested method
extended-salmon•3mo ago
They are equivalent. An empty state is just an initial state. Note the language you used:
I expect the reset form function to wipe out all fields not resetting themIt's an active action that clears values. But a common pattern is editing existing data and submitting the changes. After those are applied, the form can successfully reset, but it's no longer in sync with its new values. That's where the
form.reset() overload comes in