Version 7.43.4

🐞 fix #10021 issue with .next runtime error and fix cypress action (#10026)

Version 7.43.3

📐 fix resetField defaultValue type and reduce any type (#10024)
🐞 fix #9997 issue on the mounted state is updated with values prop (#10001)
Revert "🏍 delete dirty fields node instead of marking as false (#9156)" (#9996)
💅 improve state subscription consistency (#9984)

Version 7.43.2

🐞 fix #9972 input focus with submitted form (#9978)
💉 improve perf & save some bytes (#9968)
🐞 fix #9955 useForm values prop keepDirtyValues not update isDirty (#9959)
🗑️ remove JSX message check (#9921)

Version 7.44.0-next.1

📄 Form Component update

• added support for custom fetcher

// axios
<Form 
  action="/api" 
  method="post"
  fetcher={(action, { values }) => axios(action, values)}
/>

// SWR, Tan Query
<Form 
  action="/api" 
  method="post"
  fetcher={(action, { values }) => mutation(action)}
/>

• server error no longer set custom error

Beta documenation: http://localhost:8000/api/useform/form

🗑️ remove JSX message check (#9921)

Version 7.44.0-next.0

📄 Form Component

Usage example

• React Web

const { control, register, formState: { isSubmitSuccessful, errors } } = useForm({
  // progressive: true, optional prop for progressive enhancement
});

<Form action="/api" control={control}>
  <input {...register('name')} />

  {isSubmitSuccessful && <p>Form submit successful.<p>}
  
  {errors?.root?.server && <p>Form submit failed.</p>}

  <button>submit</button>
</Form>

• React Native

const { control, register, formState: { isSubmitSuccessful, errors } } = useForm();

<Form action="/api" control={control} render={({ submit }) => {
  <View>
    {isSubmitSuccessful && <Text>Form submit successful.<Text>}
    
    {errors?.root?.server && <Text>Form submit failed.</Text>}
  
    <Button onPress={() => submit()} />
  </View>
}}/>

Types

• Component props

export type FormProps<
  T extends FieldValues,
  U extends FieldValues | undefined = undefined,
> = Partial<{
  control: Control<T>;
  children?: React.ReactNode | React.ReactNode[];
  render?: (props: {
    submit: (e?: React.FormEvent) => void;
  }) => React.ReactNode | React.ReactNode[];
  onSubmit: U extends FieldValues ? SubmitHandler<U> : SubmitHandler<T>;
  onSuccess: ({ response }: { response: Response }) => void;
  onError: ({
    response,
    error,
  }:
    | {
        response: Response;
        error?: undefined;
      }
    | {
        response?: undefined;
        error: unknown;
      }) => void;
  headers: Record<string, string>;
  validateStatus: (status: number) => boolean;
}> &
  Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onError'>;

Version 7.43.1

🐞 fix #9871 issue with error type (#9873)
🐞 fix #9842 clearErrors method does not support global error (#9843)

Version 7.43.0

🌏 feature: support global error type #9746

const onSubmit = async () => {
  const response = await fetch(...)
  if (response.statusCode > 200) {
      setError('root.serverError', { 
        type: response.statusCode,
      })
  }
}

const onClick = () => {
  setError('root.random', { 
    type: 'random', 
  })
}

return (
  <>
    {errors.root.serverError.type === 400 && <p>server response message</p>}
    <p>{errors.root?.serverError?.message}</p>
    <p>{errors.root?.random?.message}</p>
  </>
)

🪜 fix set values for controlled components (#9780)

const { control } = useForm({ values: { test: '' } })
<Controller name="test" /> // no longer throw react warning for uncontrolled become controlled.

🚓 stronger typing to document non-spec attribute uses (#9809)

register('number', {
  valueAsNumber: true,
  pattern: /[1-4]/g // ❌ type error
})

🏋🏻‍♀️ reduce package size (#9778)
🧧 reduce unknown and any (#9816)

thanks to @rekliner

Version 7.43.0-next.0

🌏 feature: support global error type #9746

const onSubmit = () => {
  const response = await fetch(...)
  if (response.statusCode > 200) {
      setError('root.serverError', { 
        type: response.statusCode,
        message: e.message,
      })
  }
}

const onClick = () => {
  setError('root.random', { 
    type: 'random', 
    message: 'random' 
  })
}

return (
  <>
    {errors.root.serverError.type === 400 && <p>server response message</p>}
    <p>{errors.root.serverError.message}</p>
    
    <p>{errors.root.random.message}</p>
  </>
)

🪜 fix set defaultValues for controlled components with values props (#9780)

Version 7.42.1

🐞 fix #9773 useFormState missing state update (#9777)
🐞 fix #9765 fix issue with strictMode with isValid state (#9771)

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