'Validate form with Yup and react-hook-form

I have a form. It dynamically creates checkboxes with string values based on the list. There is also a text field in the form. With yup I need to validate that at least one checkbox is selected or a textbox contains an input. To create a form I use react-hook-form.

export const schema = yup.object({
     items: yup.array().notOneOf([false], 'At least one option is required')
})

const {
    register,
    formState: {
        errors = {},
    },
    reset,
    handleSubmit,
} = useForm({
    mode: 'onSubmit',
    reValidateMode: 'onSubmit',
    shouldUnregister: true,
    resolver: yupResolver(schema)
});

const input = register('description');

        <form onSubmit={submitForm}>
            <div>
                <div>
                    {docs.map((doc, i) => (
                        <div key={doc}>
                            <label>
                                <input type="checkbox"
                                    id={doc}
                                    name={`items[${i}]`}
                                    value={doc}
                                    {...register(`items[${i}]`)} />
                            </label>
                        </div>
                    ))}
                </div>

                <TextField {...input}/>
            </div>
        </form>

I know that you can somehow use useFieldArray, but an error appears with the fact that initially a boolean value is stored in the checkbox, after selection, a text value is already stored there



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source