Releases: react-hook-form/react-hook-form
Version 7.42.1
Version 7.42.0
📽 feature: validate function to include form values (#9079)
type FormValues = {
number1: number;
number2: number;
};
// Making exported validate function isolated for validation
export function validateNumber(_: number, formValues: FormValues) {
return formValues.number1 + formValues.number2 === 3;
}
export default function App() {
const { register, handleSubmit } = useForm({
defaultValues: {
number1: 0,
number2: 0
}
});
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<input
type="number"
{...register("number1", {
validate: validateNumber,
valueAsNumber: true
})}
/>
<input
type="number"
{...register("number2", {
validate: validateNumber,
valueAsNumber: true
})}
/>
<button>submit</button>
</form>
);
}
🛤️ keep track of traversed types to avoid self-referencing while constructing paths for a type (#9540)
🏋🏻♀️ reduced code with unset by weight reduction of 1% (#9575)
📔 fix warning for setValue test case
🪜 Improve handleSubmit
function by removing swallow runtime error
🙆🏻♂️ fix: revert fieldState.invalid deprecated (#9760)
🇪🇸 fix Spanish translation (#9737)
thanks to @SimplyLinn & @Mini-ghost @mango906 @amendezm
Version 7.41.5
🐞 fix #9713 regression on validate function with react native (#9714)
thanks @Moshyfawn
Version 7.41.4
🐞 fix #9709 calling setValue breaks future onChange calls from a Controller (#9710)
thanks @Moshyfawn
Version 7.42.0-next.0
📽 feature: validate function to include formValues (#9079)
type FormValues = {
number1: number;
number2: number;
};
// Making exported validate function isolated for validation
export function validateNumber(_: number, formValus: FormValues) {
return formValus.number1 + formValus.number2 === 3;
}
export default function App() {
const { register, handleSubmit } = useForm({
defaultValues: {
number1: 0,
number2: 0
}
});
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<input
type="number"
{...register("number1", {
validate: validateNumber,
valueAsNumber: true
})}
/>
<input
type="number"
{...register("number2", {
validate: validateNumber,
valueAsNumber: true
})}
/>
<button>submit</button>
</form>
);
}
🛤️ keep track of traversed types to avoid self-referencing while constructing paths for a type (#9540)
🏋🏻♀️ reduced code with unset by weight reduce of 1% (#9575)
📔 fix warning for setValue test case
🪜 Improve handleSubmit
function
thanks to @SimplyLinn & @Mini-ghost
Version 7.41.3
💁♂️ close #9684 revert UnPackAsyncDefaultValues
to avoid TS breaking change
Version 7.41.2
🎅 Version 7.41.1
🎄 Version 7.41.0
👉 NEW values
props
The following syntax will react to values
prop update/changes.
- values will be reactive to update/change and reset accordingly
- provide a reset option to keep dirty/touched values potentially
const values = await fetch('API')
useForm({
values, // will reset the form when values updates
// resetOptions: {
// keepDirtyValues: true
// }
})
👉 NEW async defaultValues
props
The following syntax will support async defaultValues
, so we will manage the reset
form internally and update formState
accordingly.
- promise will only be resolved once during
useForm()
call - It's possible to supply
resetOptions
as well
const { formState: { isLoading } } = useForm({
defaultValues: fetch('API')
// resetOptions: {
// keepDirtyValues: true
// }
})
React use
API
useForm({
defaultValues: use(fetch('API'))
// resetOptions: {
// keepDirtyValues: true
// }
})
Screen.Recording.2022-12-17.at.9.41.51.am.mov
🙋 What's the difference between values
and defaultValues
values
will react to changes and reflect on the form values, and defaultValues
is cached for once and will never re-run the promise or react to defaultValues
changes.
⏳ close #9525 add isLoading state for async defaultValues (#9526)
🐞 fix #9581 incorrect type for array of string for message (#9584)
🐞 fix #9571 validation issue with unregister input with valueAsNumber (#9572)
🐞 fix(useWatch): default value for array of inputs (#9555)
📔 fix Controller example using deprecated as prop (#9535)
🐞 fix #9521 isValidting property stuck (#9523)
🔨 feat: Migrate to pnpm (#9516)
🎹 fix #9509 incorrect type for WatchObserver (#9510)
🌳 include flush root render method to createFormControl (#9479)
Huge thanks goes to @nvh95's work on PNPM and also thanks to @bell-steven's contribution
Version 7.40.0
🏃🏻♂️ close #9454 set isValid
and abort early for the error field (#9457)
- Improved async validation and especially combined with sync ones, which will abort early sync failed first
- IsValid evaluation will abort early if current field validation failed
- apply to both build-in and schema valdiation
Screen.Recording.2022-11-30.at.9.18.20.am.mov
🐞 fix #9473 avoid update isDirty
& dirtyFields
unless flag is passed down (#9475)
thanks @blingblingredstar for the verify