Ant 设计复选框反应钩形式验证

问题描述

这是我的 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>

这是我的反应钩子形式：

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

这是是的验证架构：

const registerValidationSchema =  Yup.object().shape({
  agreement: Yup.boolean().oneOf([true],'لطفا قوانین و شرایط را بپذیرید.'),})

最后这是我无法解决的错误消息。

警告：[antd: CheckBox] value 不是有效道具，您是说 checked 吗？

解决方法

antd Checkbox 接受 checked 作为值而不是 true 或 false。试试这个：

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

,

 <Form.Item
              name="agreement"
              validateStatus={errors.agreement ? 'error' : 'success'}
              help={errors.agreement?.message}
              valuePropName="checked"
            >
              <Controller
                name="agreement"
                control={control}
                render={({ value,...restProps }) => (
                  <Checkbox
                    {...restProps}
                    onChange={(e) =>
                      setValue('agreement',e.target.checked,{
                        shouldValidate: true,shouldDirty: true,})
                    }
                    checked={value}
                  >
                    من
                    <a href="" onClick={showModal}>
                      {' '}
                      قوانین و شرایط{' '}
                    </a>
                    را می پذیرم
                  </Checkbox>
                )}
              />
            </Form.Item>

完成