Conditional field rendering

[VijayAtDure]

Can you please help me how to render conditional fields and validations.

Scenario:

1. Field 2 will be visible if Field 1 is "YES" (Field one is boolean).
2. Field have some regex condition to satisfy

[Mohammer5]

If you're using react-final-form, then you have access to the values and errors. You could render the field 2 if the value of field 1 is true.

Here you can see you to work with the Form component. Here you can see the render props described in the link above, which contains a property called form, which you can use to retrieve the values.

<Form onSubmit={...}>
  {props => {
    const values = props.form.getState().values

    return (
      <form>
        <FieldOne />
        {values.fieldOne === 'YES' && <FieldTwo />}
      </form>
    )
  }}
</Form>

For more examples. you can check out the list of examples on the official react final form page, it includes a "Conditional Fields" example.

[VijayAtDure]

@Mohammer5 Thanks,

It seems that react-final-form is some external library. Is there a way to do this using "https://ui-forms.dhis2.nu/?path=/story/checkbox--default"

[Mohammer5]

React final form is an external library, but it's bundled with the ui library. You can import it like this:

import { ReactFinalForm } from '@dhis2/ui`
const { Form, Field } = ReactFinalForm

[VijayAtDure]

@Mohammer5 Thanks for your help.

Can you please help me how to execute following scenario:

I have created form using React final form as per your instruction. I have two select list field into that form let's say Region list and Province list. Now when I select any Region I want my province list options to get updated as per the selected Region. I will hit an API to fetch the province list options as the selected Region. So basically I want to update the option of Province field on change of Region field.

Many thanks in advance for your help.

[Mohammer5]

@VijayAtDure You can use the FormSpy component or useFormState hook (recommending the hook) and subscribe to form state changes.

Everytime the region is changes, you:

• set a loading state to true & disable interaction with the province input (to let the user know the app is loading something)
• load the provinces
• then update your local state with the new provinces
• then you update the loading state (false) and enable the province input

You can check out the docs about the useFormState hook and FormSpy component here.

You will need some kind of local state to store if you're loading data or not. Using the @dhis2/app-runtime library will help you with loading and error states, alternatively you can use react's native hooks for these states.