Comments (2)
I would recommend doing setValue with the field path in a loop instead.
setValue('nested', { tags: [2, 3] })
would be interrupted to
setValue(`nested.tags.[0]`, '2')
setValue(`nested.tags.[1]`, '3')
from react-hook-form.
Thank you for your answer.
FTR, this can be cumbersome to do in cases (like ours) when you dont know upfront what fields are array fields. It would be much simpler if we could just call setValue('nested', { tags: [2, 3] })
.
Currently we were able to workaround this limitation with the following code:
const setValueWithArraySupport = (
form: UseFormReturn,
path: string,
value: any,
options?: Partial<{
shouldValidate: boolean;
shouldDirty: boolean;
shouldTouch: boolean;
}>
) => {
// First call setValue for the whole object, as it works fine for non-array values
form.setValue(path, value, options);
// Then call the workaround
setArrayValueWithExactPath(form, path, value, options);
};
const setArrayValueWithExactPath = (
form: UseFormReturn,
path: string,
value: any,
options?: Partial<{
shouldValidate: boolean;
shouldDirty: boolean;
shouldTouch: boolean;
}>
) => {
if (!value || typeof value !== 'object') return;
// If value is an array, call setValue on the exact path
if (Array.isArray(value)) {
form.setValue(path, value, options);
return;
}
// Else, recursively call setValue on each key
Object.keys(value).forEach(key => {
const keyPath = `${path}.${key}`;
const keyValue = value[key];
setArrayValueWithExactPath(form, keyPath, keyValue, options);
});
};
Which can be called like this:
- form.setValue(
+ setValueWithArraySupport(
+ form,
finalTemporaryFieldName,
finalData,
{
shouldDirty: false,
shouldValidate: false,
shouldTouch: false,
}
);
But I'm not sure it will support nested arrays.
from react-hook-form.
Related Issues (20)
- issue: UseWatch not subscribing to array changes HOT 1
- issue: `isDirty` is always 'true' when the `reactStrictMode` property is enabled in the `next.config.js` config
- issue: setValue with shouldDirty on nested objected throws TypeError
- Validating array inputs based on another field from within the array
- Create reusable form section HOT 3
- issue: Form should not transition to 'isSubmitting' true unless validation has passed HOT 2
- issue: custom validate works onChange even though I set useForm({mode: 'onBlur'}).
- issue: FieldArray append with React Select not working correctly. HOT 1
- issue: Controlled Field Array Controller component does not render latest value with update(index, { ...item, lastName: "World", }); if using spread operator {...item, lastName: "World"} to update an object
- The new website has a security problem which stops me from seeing it HOT 1
- issue: Subscription to isValidating via useController causes quadratic amounts of re-renders on submit HOT 4
- issue: useFieldArray incorrectly treats value of 0 as empty value
- issue: Form-level `disabled` doesn't affect uncontrolled inputs that aren't rendered immediately HOT 1
- issue: Fields dirty state is not updated when passing values to useForm since 7.51.0 HOT 8
- Validate all Form Fields in Parallel on Submit when criteriaMode is set to 'all' HOT 2
- Submit the form outside the form (imperative submission)
- issue: Async defaultValues function overwrites values in React.StrictMode
- issue: Default values set by resetting are discarded when register has not been called yet.
- issue: useFieldArray doesn't retain provided values when appending
- issue: `setValue` with object array makes lost of reference
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-hook-form.