react-hook-form

👨‍👨‍👦 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)