Unform: Dynamic form with conditional fields

[davifalta]

Hi,
I'm working on a survey feature for my app, in which I'll fetch a template from the API, and create the form fields according to it. I'll have a bunch of different input types (like checkbox, radio buttons, and so on). This library is the main candidate for our use case, since we have huge forms and unform offers scalable state management through the use of _uncontrolled_ presentational components. Conditional field rendering plays a big part in our mechanic (showing or hiding certain form fields according to the value of previous ones) and since there's no documentation or examples on this topic, I would like to know if there's a recurrent pattern you guys use to make this work, also leveraging the uncontrolled paradigm.

This is the key point hanging on my decision, so i would be glad if someone could help me :D

[diego3g]

Hello @davifalta, do you think you can show us one example of something you need to create so we can work on a Code Sandbox demo of that?

[alexandreh92]

Hi there, I believe this case is related to this issue:

e.g.
When a checkbox is checked it renders a input.

<Scope path="opening_hours">
 week_days.map((hours,idx) => (
  <Scope path=`week_day[${idx}]`
    <Checkbox name="enabled"/>
    {*here if checkbox is checked=true* && (
      <Input name="initial_hour"/>
      <Input name="closing_hour"/>
    ) }
  </Scope>
 ));
</Scope>

So, I've lost some time on this and doesn't figure out yet

Thank you!

[jvrviegas]

I have the same problem on a project that i'm working. When i remove the fields, they are still send to the form submit. Haven't figured out either, waiting for a solution!

[rafaelcardososilva]

Same Problem here
<Scope path="structure"> <Select name="id" options={[]}/> {!id == 3 && ( <Input name="StrikeBarrier" type="number" format="percentage" placeholder="0" /> )} </Scope>