reactjs - Ant design checkbox react hook forma validation

Question

this is my jsx:

            <Form.Item
              name="agreement"
              validateStatus={errors.agreement ? 'error' : 'success'}
              help={errors.agreement?.message}
              valuePropName="checked"
            >
              <Controller
                name="agreement"
                control={control}
                render={(props) => (
                  <Checkbox {...props}>
                    ??
                    <a href="" onClick={showModal}>
                      {' '}
                      ?????? ? ?????{' '}
                    </a>
                    ?? ?? ?????
                  </Checkbox>
                )}
              />
            </Form.Item>

this is my react-hook-form:

  const { handleSubmit, control, errors, getValues, reset } = useForm({
    mode: 'onChange',
    defaultValues: {
      agreement: true,
    },
    resolver: yupResolver(registerValidationSchema),
  })

and this is Yup validation schema:

const registerValidationSchema =  Yup.object().shape({
  agreement: Yup.boolean().oneOf([true], '???? ?????? ? ????? ?? ???????.'),
})

and finally this is my error message that i couldn't solved it.

warning: [antd: Checkbox] value is not a valid prop, do you mean checked?

question from:https://stackoverflow.com/questions/65843120/ant-design-checkbox-react-hook-forma-validation

Answer 1

antd Checkbox accept checked as value not true or false. Try this:

const { handleSubmit, control, errors, getValues, reset } = useForm({
    mode: 'onChange',
    defaultValues: {
      //agreement: true,
        agreement: "checked"
    },
    resolver: yupResolver(registerValidationSchema),
})