Флажок дизайна муравья React Hook Forma validation

это мой 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),
  })

и это схема проверки Yup:

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

и, наконец, это мое сообщение об ошибке, которое я не смог решить.

предупреждение: [antd: Checkbox] value не является допустимым параметром, вы имеете в виду checked?


reactjs validation yup react-hook-form antd
person ShaSha    schedule 22.01.2021    source источник

Ответы (2)


arrow_upward
0
arrow_downward

antd Checkbox принимает checked как значение, а не true или false. Попробуй это:

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

arrow_upward
0
arrow_downward 

 <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>

Выполнено

person ShaSha    schedule 22.01.2021