π¨βπ¨βπ¦ 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