FormlyLogic might look complicated and you may not get it right the first time and that's okay. Please read through the docs, watch the videos and take a look at the templates we have provided.
If you ever need any help during your build, stuck on something or it just doesn't work, reach out to us on Slack and we will help you.
Here's a quick demo on how to build with FormlyLogic
Refers to the element that has the data-form=multistep attribute.
A step refers to the element that has the data-form=step attribute.
A step-wrapper refers to the element that is place inside the step that contains the contents of that step
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.
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.
To enable logic on your Formly form, add this attribute to your Form element.
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.
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.
Every first step wrapper in your Logic form will need to have a data-answer="" attribute.
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!
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 still use data-go-to to show a specific step-wrapper in the step you skipped to.
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.
If you have an intro card (the first step of the form has no input) you don't need to add data-answer="".
Because there are no inputs to validate hence adding that attribute will result in an error.
You just need to add this attribute.
If you have a step or a step wrapper without any inputs, please add this attribute to the element.