npm react-hook-form 7.18.0
Version 7.18.0

latest releases: 7.53.0, 7.52.2, 7.52.1...
2 years ago

πŸ‘¨β€πŸ‘¨β€πŸ‘¦ schema error parent level look up (#6869)

const validationSchema = object().shape({
  questions: array()
    .min(1, "Array cannot be empty")
    .of(
      object().shape({
        text: string().required("Some text is required")
      })
    )
});

function App() {
  const {
    control,
    formState: { errors },
    register
  } = useForm({
    mode: "onChange",
    resolver: yupResolver(validationSchema),
    defaultValues: { questions: [ { text: 'test' } ] }
  });
  const { fields, remove } = useFieldArray({
    control,
    name: "questions",
  });
  console.log(errors);
  return (
    <form>
      {fields.map((question, questionIndex) => (
        <div key={question.key}>
          <input {...register(`questions[${questionIndex}].text`)} />

          <button type="button"
            onClick={() => {
              remove(questionIndex);
            }}
          >
            Remove
          </button>
        </div>
      ))}
    </form>
  );
}

Codesandbox LInk: works with min length parent error object look up

😞 fix #6896 validation isValid mixed with schema result (#6901)
🍨 close #6899 trigger isolate render for targeted input name (#6900)
πŸ‘‚ close #6889 disable early subscription with useController (#6890)
🐞 fix #6792 reset with keepDefaultValues (#6886)
℁ change the subject from class to function base to improve readability and reduce the size (#6843)
πŸ‘‚πŸ» make sure subscriptions get unsubscribed after unmount (#6873)
🧻 prevent error lookup with fields (#6871)

Revert "Revert "✨ Add support for generic components using `FieldPat… (#6753)

type ExpectedType = { test: string };

const Generic = <FormValues extends FieldValues>({
  name,
  control,
}: {
  name: FieldPathWithValue<FormValues, ExpectedType>;
  control: Control<FormValues>;
}) => {
  const {
    field: { value, ...fieldProps },
  } = useController<FormValues, ExpectedType>({
    name,
    control,
    defaultValue: { test: 'value' },
  });

  return <input type="text" value={value.test} {...fieldProps} />;
};

😒 fix #6856 regression on set input file list (#6861)
⌨️ fix #6852 watch missing type with DeepPartial (#6854)

thanks to @kotarella1110

Don't miss a new react-hook-form release

NewReleases is sending notifications on new releases.