Skip to content

Conditional fields

Charly POLY edited this page Jun 5, 2018 · 1 revision

<ApolloForm> helps you making conditionals fields, in short make some fields appearing only if some data is entered.

In order to do this, just add a ui:if to any property of your ui object.

Example:

<ApplicationForm
    title={'Todo Form'}
    config={{
        name: 'todo',
        schema: schema({
            shipping: {
                billingSameAsDelivery: types.type('boolean'),
                billing: {
                        address: types.type('string')
                }
            }
        }),
        saveData: data => {
            console.log('save !', data);
        }
    }}
    data={{}}
    ui={{
        shipping: {
            billing: {
                'ui:if': {
                    'shipping.billingSameAsDelivery': true
                },
            }
        }
    }}
/>

In this example, billing field will only show if billingSameAsDelivery is true (checked)