react-hook-form

[6.0.0] - 2020-07-1

Added

• Config for shouldUnregister which allow input to be persist even after unmount

useForm({
  shouldUnregister: false, // unmount input state will be remained
});

• Auto focus with useFieldArray

append({}, (autoFocus = true));
prepend({}, (autoFocus = true));
insert({}, (autoFocus = true));

• TS: NestedValue

import { useForm, NestedValue } from 'react-hook-form';

type FormValues = {
  key1: string;
  key2: number;
  key3: NestedValue<{
    key1: string;
    key2: number;
  }>;
  key4: NestedValue<string[]>;
};

const { errors } = useForm<FormValues>();

errors?.key1?.message; // no type error
errors?.key2?.message; // no type error
errors?.key3?.message; // no type error
errors?.key4?.message; // no type error

• useWatch (new) subscribe to registered inputs.

<input name="test" ref={register} />;

function IsolateReRender() {
  const { state } = useWatch({
    name: 'test',
    control,
    defaultValue: 'default',
  });

  return <div>{state}</div>;
}

• getValues() support array of field names

getValues(['test', 'test1']); // { test: 'test', test1: 'test1' }

• useForm({ mode: 'all' }) support all validation

Changed

• Rename validationResolver to resolver

• Rename validationContext to context

• Rename validateCriteriaMode to criteriaMode

• Rename triggerValidation to trigger

• Rename clearError to clearErrors

• Rename FormContext to FormProvider

• Rename dirty to isDirty

• dirtyFields change type from Set to Object

• Controller with render props API, and removed the following props:

  • onChange

  • onChangeName

  • onBlur

  • onBlurName

  • valueName

-<Controller
-  as={CustomInput}
-  valueName="textValue"
-  onChangeName="onTextChange"
-  control={control}
-  name="test"
-/>
+<Controller
+  render={({ onChange, onBlur, value }) => (
+     <CustomInput onTextChange={onChange} onBlur={onBlur} textValue={value} />
+  )}
+  control={control}
+  name="test"
+/>

• setError will focus one error at a time and remove confusing set multiple errors, behavior change.

  • setError will persist an error if it's not part of the form, which requires manual remove with clearError

  • setError error will be removed by validation rules, rules always take over errors

- setError('test', 'test', 'test')
+ setError('test', { type: 'test', message: 'bill'})

• setValue will focus on input at a time

setValue('test', 'value', { shouldValidate: false, shouldDirty: false })

Removed

• breaking

  Remove validationSchema and embrace validation resolver

• breaking

  Remove nest option for watch & getValues, so data return from both methods will be in FormValues shape.

-getValues({ nest: true }); // { test: { data: 'test' }}
-watch({ nest: true }); // { test: { data: 'test' }}
+getValues(); // { test: { data: 'test' }}
+watch(); // { test: { data: 'test' }}