react-hook-form

Changed

• errors is also part of formState object
• disabled input will not be part of the submission data by following the HTML standard

Added

• Controller's render prop will pass down name prop
• handleSubmit take a second callback for errors callback
• new mode onTouched will only trigger validation after inputs are touched

Changed

• register no longer compare ref difference with React Native

Changed

• IE 11 version will be required to install @babel/runtime-corejs3 as dependency at your own project

Changed

• defaultValue is become required for useFieldArray at each input

Changed

• revert getValues will return default values before inputs registration

Changed

• resolver supports both async and sync
• getValues will return default values before inputs registration

Added

• export ArrayField type

Changed

• error message will support array of messages for specific type

- export type ValidateResult = Message | boolean | undefined;
+ export type ValidateResult = Message | Message[] | boolean | undefined;

Changed

• Controller onFocus works with React Native
• Controller stop producing checked prop by boolean value

Added

• export UseFormOptions, UseFieldArrayOptions, FieldError, Field and Mode type

Added

• export ValidationRules type

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

• remove validationSchema and embrace validation resolver
• 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' }}