Quick Links
Search docs
✨ Watch a quick demo
Here's a quick demo on how to build with FormlyLogic
Form element
Refers to the element that has the data-form=multistep attribute.
Step
A step refers to the element that has the data-form=step attribute.
Step-Wrapper
A step-wrapper refers to the element that is place inside the step that contains the contents of that step
Concept
FormlyLogic is a type of form that consists of multiple steps and allows for conditional visibility.
In other words, as the user progresses through the form, certain elements on the next step will be shown or hidden depending on the options the user selected on previous steps.
With Logic users still go to the next step but the content of that step changes based on the user's previous selections. They DO NOT skip steps,
However, there is an optional feature or "powerup" that allows skipping steps based on user input.
setup & Structure
The fundamental structure of the Formlylogic form is similar to that of a standard Formly form, comprising form elements, form steps, and navigation button attributes. However, to establish logical flows, there are two crucial points to bear in mind:
1. FormlyLogic progresses in a forward direction.
This implies that the form advances to the next step whenever a decision is made, but only to the appropriate element within that step. It is necessary to link each step to the following step using attributes.
2. Connect every step
Even if a step has no logic, it still requires a connection to the subsequent step as if it has a single logical flow. Every step must have a data-answer and a data-go-to attribute!
3. Radio Group Name
To ensure that users can only select one logic flow in each step with conditional logic, it is essential to utilise radio buttons and ensure that the radio group names are identical on each step.
This restricts the user to selecting only one option and determines the subsequent questions or information displayed on the next step.
data-go-to="step-2"
(skip to step 5)
data-go-to="step-4"
data-go-to="step-4"
data-go-to="step-5"
Core attributes
Enable Logic
To enable logic on your Formly form, add this attribute to your Form element.
Go to attribute
This attribute essentially tells the code to show a specific element on the next step when clicked. Think of this like a branch reaching out to the next step.
answer attribute
The subsequent attribute is known as "data-answer". Apply this attribute to the div that is intended to receive the form. You can envision this as a block in a flowchart that is connected to by a branch.
First step wrapper
Every first step wrapper in your Logic form will need to have a data-answer="" attribute.
Why?
This attribute is essential to validate the form to check if all required inputs are filled out.
Why no value?
Since it is the first step in the form, it does not have a data-go-to attribute point it it hence no value that we can add.
Note: This is only for the very first step-wrapper!
Skipping steps
Let users skip further down to any part of the form!
You can add this attribute to:
1. Radio buttons to let users choose where they want to skip to
2. Step wrappers to pre-determine where use skips to from the current step.
You can MUST also use data-go-to to show a specific step-wrapper in the step you skipped to.
If you want to skip to step 4, it will be data-skip-to=4.
First step starts with an index of 1.
Where to add the attributes?
When it comes to adding the "data-go-to" and "data-answer" attributes, there are only two specific locations where they can be placed:
1. Radio Buttons:
If a step involves logic, the user must select which branch they wish to follow. In this case, a "data-go-to" attribute must be added to each radio button with a distinct value to identify which path it corresponds to.
2. Step Wrapper:
In this location, a "data-answer" attribute should be added with the same value as the corresponding radio button's "data-go-to" attribute. This allows the form to navigate to the correct step when a specific radio button is selected.
You can also add data-go-to attribute to step wrappers to connect them to the next step.
Powerups
Intro card
If you have an intro card (the first step of the form has no input) you don't need to add data-answer="".
Why?
Because there are no inputs to validate hence adding that attribute will result in an error.
You just need to add this attribute.
steps or step wrappers
without inputs
If you have a step or a step wrapper without any inputs, please add this attribute to the element.
Faqs
What are some FormlyLogic limitations?
2. Logic currently only supports OR logic. This means that the conditional logic only depends on ONE of the
I can still go to the next step even though the required inputs are not filled.
1. If it the first step-wrapper of your form, please add data-answer="".
2. Remember to connect every step to the next when using FormlyLogic.
My logic flow isn't working. It goes to the next step but I'm seeing a blank section.
Ensure each decision radio button has a data-go-to attribute connecting to a step-wrapper with a data-answer attribute with the same value.
My radio buttons are not skipping automatically
I can select multiple radio button with logic.
<input> elements of type radio are generally used in radio groups — collections of radio buttons describing a set of related options.
Only one radio button in a given group can be selected at the same time.
Reach out to us on Slack, maybe?