mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 22:17:55 +00:00
87 lines
3.6 KiB
Markdown
87 lines
3.6 KiB
Markdown
|
---
|
|||
|
|
id: build-dynamic-forms
|
|||
|
|
title: Build Dynamic Forms
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
This guide walks you through the process of building dynamic, interactive forms in ToolJet through validations.
|
|||
|
|
|
|||
|
|
<div style={{paddingBottom:'24px'}}>
|
|||
|
|
|
|||
|
|
## 1. Creating the UI
|
|||
|
|
Let’s get started by setting up your form’s interface.
|
|||
|
|
|
|||
|
|
Drag and drop a **Form** component on the canvas and place the following input components inside it.
|
|||
|
|
|
|||
|
|
| Component | Component Name | Label |
|
|||
|
|
|:--------------------------------|:---------------|:-----------------------------------------------------------------|
|
|||
|
|
| Star Rating | *starrating1* | How satisfied are you with our service? |
|
|||
|
|
| Text Input | *textinput1* | What specific issues did you encounter? |
|
|||
|
|
| Text Input | *textinput2* | Email |
|
|||
|
|
| Number Input | *numberinput1* | Contact |
|
|||
|
|
| Button | *button1* | Submit |
|
|||
|
|
|
|||
|
|
<div >
|
|||
|
|
<img src="/img/how-to/build-dynamic-forms/dynamic-form-UI.png" alt="Dynamic Form UI" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{paddingBottom:'24px'}}>
|
|||
|
|
|
|||
|
|
## 2. Add Validations and Conditions
|
|||
|
|
Now, let’s add some magic with validations and conditions to make your form smart and responsive.
|
|||
|
|
|
|||
|
|
a. Select the *textinput1* component and navigate to its Visibility condition. Click on **fx** next to the Visibility condition and enter the below code in the input:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
{{components.form1.children.starrating1.value<4}}
|
|||
|
|
```
|
|||
|
|
*This code will ensure that the *textinput1* component is only visible when the start rating is below 4.*
|
|||
|
|
|
|||
|
|
b. Select the *textinput2* component and navigate to its Custom Validation property. Click on **fx** and enter the following code to test the email format using regex:
|
|||
|
|
```javascript
|
|||
|
|
{{/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(components.form1.children.textinput2.value)
|
|||
|
|
? '' : 'Invalid email'}}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
c. Select the *numberinput1* component and enable the toggle for Make this field mandatory. This setting will display an error when the *numberinput1* component is left blank.
|
|||
|
|
|
|||
|
|
d. Finally, the *button1* component has to be disabled if the rating, email, and contact fields are not valid. Use the following code in the component's Visibility condition to achieve that:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
{{!components.form1.children.textinput2.isValid ||
|
|||
|
|
!components.form1.children.starrating1.value ||
|
|||
|
|
!components.form1.children.numberinput1.value}}
|
|||
|
|
```
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{paddingBottom:'24px'}}>
|
|||
|
|
|
|||
|
|
## 3. Test the Functionality
|
|||
|
|
|
|||
|
|
It’s time to put your form to the test! Check that everything functions smoothly and as expected.
|
|||
|
|
|
|||
|
|
a. Check whether the *textinput1* is visible and hidden based on the star rating.
|
|||
|
|
|
|||
|
|
<div >
|
|||
|
|
<img src="/img/how-to/build-dynamic-forms/start-rating-condition-test.png" style={{paddingBottom:"25px"}} alt="Dynamic Form UI - Test Star Rating" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div >
|
|||
|
|
<img src="/img/how-to/build-dynamic-forms/start-rating-condition-test-2.png" style={{paddingBottom:"25px"}} alt="Dynamic Form UI - Test Star Rating 2" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<br/>
|
|||
|
|
|
|||
|
|
b. Enter incorrect email and contact details to see whether the related components throw an error while disabling the button.
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<img src="/img/how-to/build-dynamic-forms/incorrect-email-and-contact-test.png" alt="Dynamic Form UI - Incorrect Email and Contact Test" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
This short guide covers the main validation options that you can use while creating a dynamic form. To explore further, use the Tabs component to create multi-page forms while using the same logic to make it dynamic.
|
|||
|
|
|
|||
|
|
|