📋 React Hooks for forms validation (Web + React Native)

📽 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

💁‍♂️ close #9684 revert UnPackAsyncDefaultValues to avoid TS breaking change

🤦🏻‍♂️fix #9661 regression on required valueAsNumber (#9662)

🐞 fix #9659 NaN prevent validation update (#9660) 🕯️ close #9524 useWatch return undefined value (#9653) 📖 adjust contributing document (#9641) 💆🏻 fix #9621 with the inline default value (#9622) 🩻 docs: update contribution guidelines (#9605)

thanks to @Mini-ghost and @stefanpl

👉 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
  // }
})

https://user-images.githubusercontent.com/10513364/208200735-6248b069-9b7d-4bd1-9742-55d1ef8d238a.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

🏃🏻‍♂️ 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

https://user-images.githubusercontent.com/10513364/204661619-af11f963-588b-4e15-8699-970e6a40e48b.mov

🐞 fix #9473 avoid update isDirty & dirtyFields unless flag is passed down (#9475)

thanks @blingblingredstar for the verify

Revert "🪶 improve useFormContext perf by avoid reference re-create … …with omit (#9407)"

🚀 fix fieldArray changes only notify relevant subscribers (#9448) 🪶 improve useFormContext perf by avoid reference re-create with omit ( #9407) 💆🏻 fix potential watch() global state overwrite (#9450) 🦏 close #9410 improve UX when subscribe to both isValid and errors state (#9413) 🥨 added eslint rule for no-extra-boolean-cast (#9449)

thanks to @elton-okawa

👍 Improved async defaultValues inference

const fetchData = async () => {
  await sleep(1000)
  return {
    data: 'test'
  }
}

- useForm<Awaited<ReturnTypeof<typeof fetchData>>>({
+ useForm({
  defaultValues: fetchData, // will infer the promise return type
})

👍 Improved useForm resetOptions to keep track of dirty input

- const { formState: { dirtyFields } } = useForm({
+ useForm({ // dirtyFields subscription is no longer required
  values,
  resetOptions: {
    keepDirtyValues; true, // only non dirty input will receive data from the values update
  }
})

🪶 improve useFormContext perf by avoiding reference re-create with omit 🦏 close #9410 improve UX when subscribing to both isValid and errors state (#9413)

🍄 upgrade to TS4.9 (#9371) 🐞 fix #9383 always updates the errors state for the field array even when the errors subscription missing (#9384) 🌻 close https://github.com/react-hook-form/react-hook-form/issues/9379 flush extra re-render to update the current form state subscription 🥽 improve watch logic (#9397) 🔨 fix conditional useFormState test (#9388)

thanks to @romain-trotard

👉 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

useForm({
  defaultValues: fetch('API')
  // resetOptions: {
  //   keepDirtyValues: true
  // }
})

React use API

useForm({
  defaultValues: use(fetch('API'))
  // resetOptions: {
  //   keepDirtyValues: true
  // }
})

🙋 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 #9379 flush extra re-render at useFormState to update current form state subscription (#9380) 🍄 upgrade to TS4.9 (#9371)

🐞 fix #9366 useWatch with shadow clone Set data (#9369) 🐞 fix #9365 native validation error persists (#9370)

🤦 fix #9355 by revert "🥸 related #9310 regression to include actual ref instead custom object ( #9312)"

⌨️ close #9339 objects of validation rules type (#9341) 🥸 related #9310 regression to include actual ref instead custom object ( #9312)

Revert "🤯 use input reference instead custom object (#9132)" (#9311)

🔮 improve #8601 and remove the relationship between isValid state with mode (#9219)

https://user-images.githubusercontent.com/10513364/199356486-bec6cff7-0c33-4076-a60a-e15dc86ddb8a.mov

🐞 fix #9282 regression on async validation block validation (#9286) 🐞 fix #9251 isValidating state stale with resolver (#9254) 🏍 delete dirty fields node instead of marking as false (#9156) 🤯 use input reference instead custom object (#9132) 🥊 improve native reset API invoke (#9293) 🦘 related #9290 improve setCustomValidity logic (#9292) 👺 fix re-render bug with isValid (#9307)

🕰 support validation for week and time input type (#9189)

<input
  {...register("week", { min: "2022-W40", max: "2022-W50" })}
  type="week"
/>
<input
  {...register("time", { min: "11:00", max: "12:00" })}
  type="time"
/>

https://user-images.githubusercontent.com/10513364/196547407-8ea7363c-44b8-463e-9aaf-f946a2e5af88.mov

🧘🏻 enable focus error with disabled inputs while submitting (#9155) 🧱 prevent runtime error startsWith called with undefined (#9223) 🐞 fix #9216 isValid state not update with async form level trigger (#9218) 🧦 fix accessibility issue on examples with input missing id (#9174) 🚔 check field array value type before updating (#9170) 📓 update TSDoc for useFieldArray (#9178)

thanks to @BogdanCerovac and @leapful

🍨 feature: include defaultValues inside formState (#8966)

const { formState, watch } = useForm({
  defaultValues: { name: 'test' }
})
const { defaultValues } = useFormState()

const name = watch('name')

return (
  <div>
    <p>Your name was {defaultValues.name}</p>
    <p>Updated name is {name}</p>
  </div>
)

https://user-images.githubusercontent.com/10513364/194426053-454e8e5b-f1c1-4a9d-8428-ac33296c813f.mov

🖨 close #9058 avoid clone object when contains prototype methods

class DataModel {
  constructor() {
    this.firstName = null
  }
}
const formData = new DataModel({ firstName: "Bob" })

useForm({
  defaultValues: formData // no longer get clone internally
})

🐞 fix #9134 useFieldArray validation action inconsistency (#9136) 🥷 close #9126 useController ref overwrite under strict mode (#9130) 😵‍💫 close #9105 improve input focus method check (#9109) 📖 fix UseFieldArrayAppend types example (#9093) 🖇 change link (#9159) 🙌 improve naming of options forEach local (#9152)

thanks to @arieloO @Ilaygoldman and @simenbrekken-visma

🍨 feature: include defaultValues inside formState (#8966)

const { formState, watch } = useForm({
  defaultValues: { name: 'test' }
})
const { defaultValues } = useFormState()

const name = watch('name')

return (
  <div>
    <p>Your name was {defaultValues.name}</p>
    <p>Updated name is {name}</p>
  </div>
)

😵‍💫 close #9105 improve input focus method check (#9109) 🖨 close #9058 avoid clone object when contains prototype methods

class DataModel {
  constructor() {
    this.firstName = null
  }
}
const formData = new DataModel({ firstName: "Bob" })

useForm({
  defaultValues: formData // no longer get clone internally
})

📖 fix UseFieldArrayAppend types example (#9093)

thanks to @arieloO

🪲 fix #9082 inconsistency between single/group of checkboxes disabled check state (#9083) 🌡️ improve setFocus to prevent throw error (#9081)

🚂 feature: reset to support callback syntax (#9051)

reset with partial form values will require invoking getValues at the same time, here is an improvement 👇

Convert your code from:

reset({
  ...getValues(),
  partialData: 'onlyChangeThis'
})

to:

reset((formValues) => {
  return {
    ...formValues,
    partialData: 'onlyChangeThis'
  }
})

🎉 feature: new type FieldPathByValue field path by value generic implementation

function CustomFormComponent<
  TFieldValues extends FieldValues,
  Path extends FieldPathByValue<TFieldValues, Date>
>({ control, name }: { control: Control<FieldValues>; name: Path }) {
  const { field } = useController({
    control,
    name,
  });
}

function App() {
  const { control } = useForm<{
    foo: Date;
    baz: string;
  }>();

  return (
    <form>
      <CustomFormComponent control={control} name="foo" /> {/* no error */}
      <CustomFormComponent control={control} name="baz" /> {/*  throw an error since baz is string */}
    </form>
  );
}

🛵 close #8969 improve type for useFieldArray rules validate prop #8974

🛗 upgrade to TS 4.8.0 and Jest 29 #8620 🐞 fix #8970 register field array cause render issue #8972 🐞 fix: typings for useWatch() with no arguments #8923 🐞 fix #8919 make useController fieldState properties enumerable

const { fieldState } = useController({ name: 'test' })
const copy = {...fieldState} ✅

👶🏻 close #8909 form context children prop type (https://github.com/react-hook-form/react-hook-form/pull/8910)

<FormProvider {...methods}>
  <div /> // ✅
  <div /> // ✅
</FormProvider>

🐌 allow field errors to escape type check when provided with any type 🔐 github workflows security hardening #8965 💚 ci: stop csb ci from publishing a comment on PR (https://github.com/react-hook-form/react-hook-form/pull/8977)

thanks to @Moshyfawn, @sashashura, @carvalheiro, @chetvishal and @MicaelRodrigues

🎉 feature: new type FieldPathByValue field path by value generic implementation

function SomeCustomFormComponent<
  TFieldValues extends FieldValues,
  Path extends FieldPathByValue<TFieldValues, Date>
>({ control, name }: { control: Control<FieldValues>; name: Path }) {
  const { field } = useController({
    control,
    name,
  });
  return null;
}

function ExampleOfUsage() {
  const { control } = useForm<{
    foo: Date;
    baz: string;
  }>();

  return (
    <div>
      <SomeCustomFormComponent control={control} name="foo" />{" "}
      {/* throw no error */}
      <SomeCustomFormComponent control={control} name="baz" />{" "}
      {/*  throw an error since baz is string */}
    </div>
  );
}

🐞 fix https://github.com/react-hook-form/react-hook-form/issues/8919 make useController fieldState properties enumerable

const { fieldState } = useController({ name: 'test' })
const copy = {...fieldState} ✅

👶🏻 close https://github.com/react-hook-form/react-hook-form/issues/8909 form context children prop type (https://github.com/react-hook-form/react-hook-form/pull/8910)

<FormProvider {...methods}>
  <div /> // ✅
  <div /> // ✅
</FormProvider>

🐌 allow field errors to escape type check when provided with any type

thanks to @carvalheiro, @chetvishal and @MicaelRodrigues

Revert "🧳 let isSubmitting state update after valid form (https://github.com/react-hook-form/react-hook-form/pull/8829)"

🐞 fix(path): keys of Date | FileList | File shouldn't be add to the PathImpl https://github.com/react-hook-form/react-hook-form/pull/8804 🐞 fix Date, FileList, File and Blob FieldErrors mapping #8772 🚌 update isSubmitting state after valid form #8829

function App() {
  const { formState: { isSubmitting }, register } = useForm()

  console.log(isSubmitting) // isSubmitting will remain false if form is invalid during submission

  return <form onSubmit={handleSubmit(async () => await sleep(1000))}>
    <input {...register('test', { required: true })} />
  </form>
}

🧃 upgrade to cypress 10 #8769 📖 fix nested fields example #8840 📖 add nested form example #8703 📖 improve doc of single watch #8773 📖 fixing typo (Contruído to Construído) on pt-BR translation #8762

thanks to @HarmonyEarth, @yleflour, @glekner, @vemoo, @ronny1020 and @joaoeffting

🎉 feature request: #6879 useFieldArray support rules props (#8102)

useFieldArray({
  name: 'test',
  rules: {
    required: true,
    minLength: 2,
    maxLength: 10,
    validate: (fieldArrayValues) => {
      if (fieldArrayValues[2].title === 'test') {
        return 'validate Error'
      }
    }
  }
})

errors?.test?.root?.message // access root level errors

Note: Related context and poll for error message naming: https://github.com/react-hook-form/react-hook-form/discussions/8625

🐞 fix https://github.com/react-hook-form/react-hook-form/issues/8584: handle nullable nested properties (https://github.com/react-hook-form/react-hook-form/pull/8699) 🆎 close https://github.com/react-hook-form/react-hook-form/issues/8689 fix type inconsistency with control (https://github.com/react-hook-form/react-hook-form/pull/8691) 🐞 fix native form reset isn't executed if first fieldReference isn't a HTMLElement (https://github.com/react-hook-form/react-hook-form/pull/8678) 🐞 fix useFieldArray action type incorrectness (https://github.com/react-hook-form/react-hook-form/pull/8660) 🚔 close https://github.com/react-hook-form/react-hook-form/issues/8653 when useFormContext provide no generic for type check (https://github.com/react-hook-form/react-hook-form/pull/8654) 🛰 useFormContext include type tests (https://github.com/react-hook-form/react-hook-form/pull/8656) 🤣 fix typo in useForm.ts (https://github.com/react-hook-form/react-hook-form/pull/8645) 📚 README Helper / Sponsor Generation Script / Workflow (https://github.com/react-hook-form/react-hook-form/pull/8676)

thanks to @@ANTARES-KOR @zandowc @@alexviar @ElectronicsArchiver and @kyoto7250

🎪 feature request: #6879 useFieldArray support rules props (#8102)

useFieldArray({
  name: 'test',
  rules: {
    required: true,
    minLength: 2,
    maxLength: 10,
    validate: (fieldArrayValues) => {
      if (fieldArrayValues[2].title === 'test') {
        return 'validate Error'
      }
    }
  }
})

errors?.test?.root?.message // access root level errors

Note: Related context and poll for error message naming: https://github.com/react-hook-form/react-hook-form/discussions/8625

🐏 fix https://github.com/react-hook-form/react-hook-form/issues/8584: field errors type with optional fields (https://github.com/react-hook-form/react-hook-form/pull/8591) 🧳 close https://github.com/react-hook-form/react-hook-form/issues/8600 update code example for NestedValue input 🖼 Integrate jest-preview into react-hook-form (https://github.com/react-hook-form/react-hook-form/pull/8577) 🤓 improve the readability of Merge type (https://github.com/react-hook-form/react-hook-form/pull/8570) 🚝 test: migration from ts-jest to @swc/jest (https://github.com/react-hook-form/react-hook-form/pull/8572) 🏹 refactor: use const instead of props (https://github.com/react-hook-form/react-hook-form/pull/8571) 🔍 feat: Add ability to search test file on watch mode (https://github.com/react-hook-form/react-hook-form/pull/8573) 🧘🏻 ensure the field is focused when selected (https://github.com/react-hook-form/react-hook-form/pull/8566)

thanks to @nvh95, @elstgav and @kotarella1110

⚛️ upgrade to react 18 (https://github.com/react-hook-form/react-hook-form/pull/8529) 🐞 fix https://github.com/react-hook-form/react-hook-form/issues/8558 missing select function for controlled component (https://github.com/react-hook-form/react-hook-form/pull/8559) 🔬 improve nested field errors type (https://github.com/react-hook-form/react-hook-form/pull/8527) 🗑 UseFormHandleSubmit remove unused generic (https://github.com/react-hook-form/react-hook-form/pull/8526)

👋 deprecate on NestedValue and UnpackNestedValue (https://github.com/react-hook-form/react-hook-form/pull/8528)

type FormValues = {
-  select: NestedValue<{
-    nested: string
-  }>
+  select: {
+    nested: string
+  }
}

errors.select.message ✅ 

Important (25/06/2022)

The deprecation with UnpackNestedValue caused a breaking change on the @hookform/resolvers package, please refer to the changelog and upgrade the resolver to the latest.

🥼 close https://github.com/react-hook-form/react-hook-form/issues/8564 update changelog for breaking change with resolver 💥 The above type deprecation cause breaking change with @hookform/resolvers needs to be upgraded to version ^2.9.3 above

Huge thanks go to @felixschorer on type improvement and @romain-trotard for improving tests for react 18

🏋🏻 improve build dist package size (https://github.com/react-hook-form/react-hook-form/pull/8511) 🐞 fix https://github.com/react-hook-form/react-hook-form/issues/8506 delayError not overwrite existing function call (https://github.com/react-hook-form/react-hook-form/pull/8509) 📖 update the use of validadtionSchema in v7 examples (https://github.com/react-hook-form/react-hook-form/pull/8501)

thanks, @bryantobing12