Unable to Show/Hide fields based on different selections of the same drop-down list #173
Description
Good morning,
This is an issue that spawned from the following comment thread on Umbraco:
https://our.umbraco.com/packages/backoffice-extensions/formulate/formulate-questions/99332-show-hide-fields#comment-320173
I've added a new formulate form template based on a custom version of the Angular.cshtml that is provided. In this custom version, I've added a conditionalControls object and attempted to add an array of conditionalControls that would be handled by the underlying responsive.bootstrap.angular.js file (starting on line 770). There seems to be an issue with how this code is interpreted because the last item in the array of conditionalControls is rendered when selected, and is rendered in a fashion that all GUIDs that were in any of the conditionalControls written were selected. Here is a sample code of what was done in the custom Angular.cshtml file (from line 219):
url = "/umbraco/formulate/submissions/submit",
//Conditional fields - simple conditional structure
conditionalControls = new []
{
// Show the "other" field when a user indicates they heard about the company
// from some other source.
new
{
fieldId = "StateFieldGUID",
show = "CA",
fields = new []
{
"CheckboxGUID3"
}
},
new
{
// States = 68c419c5-a53d-48fe-a39b-3ceb226eaff5
fieldId = "StateGUID",
show = "NJ",
fields = new []
{
"CheckboxGUID4",
"CheckboxGUID5"
}
}
}
The area in the responsive.bootstrap.angular.js file where logic could be in question is starting on line 770:
function showConditionalFields(conditionalControls, fieldModels) {
var condMap = {};
var fieldMap = {};
function show(id) {
return function () {
return condMap[id].show === fieldModels[id];
};
}
function execCallback(fn) {
return fn();
}
function addConditionalControl(item) {
condMap[item.fieldId] = item;
function pushFieldCallback(fieldId) {
if (!fieldMap.hasOwnProperty(fieldId)) {
fieldMap[fieldId] = [];
}
fieldMap[fieldId].push(show(item.fieldId));
}
item.fields.forEach(pushFieldCallback);
}
if (angular.isArray(conditionalControls)) {
conditionalControls.forEach(addConditionalControl);
}
/**
* Returns bool whether to show input control (field)
*/
return function (fieldId) {
if (fieldMap.hasOwnProperty(fieldId)) {
return fieldMap[fieldId].every(execCallback);
}
return true;
};
}
Other than that, the custom template was registered, was selectable and the form in question was able to be rendered. It's just that this behavior is not ideal when attempting to conditionally show a collection of fields based on selections from a dropdown list. See screenshots for resulting behaviors.
