Form - Refine

efficient-indigo · 2023-10-30T10:22:01.272Z

` ` ` ` How to require input timeUnit when entering value into input time?

K

kapa.ai•10/30/23, 10:22 AM

Hi @hoaanhtuc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•10/30/23, 10:22 AM

----------------------
You can achieve this by using conditional validation with Yup, a JavaScript schema builder for value parsing and validation. In the validation schema, you can use the

when

when

method to add a condition to a field. The

when

when

method allows you to change the validation schema of a field based on the value of another field.

Here's an example:

const schema = Yup.object().shape({
  time: Yup.string()
    .required('This field is required'),
  timeUnit: Yup.string().when(
    "time",
    (time: string, schema: Yup.StringSchema) => {
      return time ? schema.required('This field is required') : schema
    }
  ),
});

const schema = Yup.object().shape({
  time: Yup.string()
    .required('This field is required'),
  timeUnit: Yup.string().when(
    "time",
    (time: string, schema: Yup.StringSchema) => {
      return time ? schema.required('This field is required') : schema
    }
  ),
});

const schema = Yup.object().shape({
  time: Yup.string()
    .required('This field is required'),
  timeUnit: Yup.string().when(
    "time",
    (time: string, schema: Yup.StringSchema) => {
      return time ? schema.required('This field is required') : schema
    }
  ),
});

const schema = Yup.object().shape({
  time: Yup.string()
    .required('This field is required'),
  timeUnit: Yup.string().when(
    "time",
    (time: string, schema: Yup.StringSchema) => {
      return time ? schema.required('This field is required') : schema
    }
  ),
});

In this example,

timeUnit

timeUnit

timeUnit

timeUnit is required only if

time

time

is filled. If

time

time

is not filled,

timeUnit

timeUnit

timeUnit

timeUnit is not required.

You can find more information about this in the extracted source (ask-any-questionuseForm).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•10/30/23, 10:22 AM

@617879699363725341 kapa.ai is still learning and improving, please let us know how it did by reacting below

B

brilliant-lime•10/30/23, 10:24 AM

Hello @hoaanhtuc
https://ant.design/components/input you can check ant design documentation

E

efficient-indigoOP•10/30/23, 10:28 AM

<Form {...formProps}>
<Row gutter={24}>
<Col span={24}>
<InputForm label="time" name="time" />
</Col>
<Col span={24}>
<SelectTimeUnit
required={formProps?.form?.getFieldValue("time") ? true : false}
/>
</Col>
</Row>
</Form>

This is the form and log value I receive.

B

brilliant-lime•10/30/23, 10:30 AM

what is <SelectTimeUnit /> implementation ?

E

efficient-indigoOP•10/30/23, 10:35 AM

I want when entering a value into time, timeUnit will be required, and vice versa

E

efficient-indigoOP•10/30/23, 10:36 AM

formProps?.form?.getFieldValue("time") is not working

B

brilliant-lime•10/30/23, 10:37 AM

yes.

form?.getFieldValue("time")

form?.getFieldValue("time")

form?.getFieldValue("time")

form?.getFieldValue("time") comes from Antd design and does not sync with UI.

you can use https://ant.design/components/form#formusewatch or you can use react state to conditionaly render

Bbrilliant-lime yes. `form?.getFieldValue("time")` comes from Antd design and does not sync wit...

E

efficient-indigoOP•10/30/23, 10:40 AM

const timeValues = Form.useWatch("time", formProps);
great, it worked without state

B

brilliant-lime•10/30/23, 10:40 AM

I'm glad to hear that