Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Conditional Mandatory Field Logic is not Working

See original GitHub issue

Environment

Please provide as many details as you can:

Hosting type
- Form.io
- Local deployment
  - Version:
Formio.js version: Latest
Frontend framework: javascript
Browser: all
Browser version:

Steps to Reproduce

Create a new select field, label it ‘Make Gender Mandatory’. API Property name is myObject.genderMandatory.
Create a second field, add logic to make this field mandatory if specified value is selected in the above field. API property name is myObject2.genderId.
Select Yes from the first field.

Expected behavior

If we select Yes from ‘Make Gender Mandatory’ select box then the Gender field should become mandatory.

Observed behavior

The field is not becoming mandatory. If I remove object notation for API property then it works but not if I use property API as myObject.genderMandatory or myObject2.genderId.

Example

A live example (via JSFiddle) demonstrating this issue.

Code is below as well.


Formio.createForm(document.getElementById('formio'), 
{
    "display": "form",
    "settings": {
        "pdf": {
            "id": "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
            "src": "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0"
        }
    },
    "components": [
        {
            "label": "Make Gender Mandatory",
            "widget": "choicesjs",
            "tableView": true,
            "data": {
                "values": [
                    {
                        "label": "Yes",
                        "value": "1"
                    },
                    {
                        "label": "No",
                        "value": "2"
                    }
                ]
            },
            "selectThreshold": 0.3,
            "key": "myObject.genderMandatory",
            "type": "select",
            "indexeddb": {
                "filter": {}
            },
            "input": true
        },
        {
            "label": "Gender",
            "widget": "choicesjs",
            "tableView": true,
            "data": {
                "values": [
                    {
                        "label": "Male",
                        "value": "male"
                    },
                    {
                        "label": "Female",
                        "value": "female"
                    }
                ]
            },
            "selectThreshold": 0.3,
            "key": "myObject2.genderId",
            "logic": [
                {
                    "name": "GenderIdLogic",
                    "trigger": {
                        "type": "simple",
                        "simple": {
                            "show": true,
                            "when": "myObject.genderMandatory",
                            "eq": "1"
                        }
                    },
                    "actions": [
                        {
                            "name": "GenderIdActionOn1",
                            "type": "property",
                            "property": {
                                "label": "Required",
                                "value": "validate.required",
                                "type": "boolean"
                            },
                            "state": true
                        }
                    ]
                }
            ],
            "type": "select",
            "indexeddb": {
                "filter": {}
            },
            "input": true
        },
        {
            "type": "button",
            "label": "Submit",
            "key": "submit",
            "disableOnInvalid": true,
            "input": true,
            "tableView": false
        }
    ]
},  {
    templates: {
      wizard: {
        form: `
          <div style="position: relative;">
            <div class="wizard-page" ref="{{ctx.wizardKey}}">
              {{ctx.components}}
            </div>
            {{ ctx.wizardNav }}
          </div>
        `,
      },
    },
  }
).then((form) => {
  
});

Issue Analytics

State:
Created 3 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

travistcommented, Jun 4, 2020

I believe we just pushed up a fix for this issue this morning. It includes this PR https://github.com/formio/formio.js/pull/2887

0reactions

learner291commented, Jun 4, 2020

Downloaded the latest version (v4.10.0-rc.10) and the entity.FieldName notation works as expected, thank you.

Top Results From Across the Web

Bug found in Dynamically creating conditional logic & required fields ...

I have created a field that shows or hides based on conditional logic that I generate myself using the $field['conditionalLogic'] item, the conditional...

Conditionally required fields are not required - Drupal

I have tested with the select (condition) field required and not required and had no issues. I will upload some screenshots and a...

Conditionally Make a field Required | Rally Software

Is it possible to make a field as required. For example, once a task is marked completed, we would like a completion date...

Required inputs even if field is not set as required in ACF

Hi, I'm using this plugin with ACF conditional logic so that an RRULE field only appears depending on another field's selection.

Three Mandatory fields and if any one answered sho...

Hi Community, I have a field "A" with choices 1, 2, 3. If 1 is selected, fields X1, Y1, Z1 are visible under...