[BUG] FormUtils.eachComponent fails iteration on component.columns

Environment

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• Formio.js version: 4.6.2
• Frontend framework: Angular@8.2.5
• Renderer: angular-formio@4.2.12
• Browser: chrome
• Browser version: 77.0.3865.120

Steps to Reproduce

1. Inside the Form Builder
2. Create a form
3. Add a column component
4. Add a TextField component inside the column component
5. Edit the submit button and change action to custom
6. Add the following code to the “Button Custom Logic”

  utils.eachComponent(form.components, (component, path) => {
    console.log(component.key)
  }, true);

1. Save component
2. Save the form
3. In the form manager go to the “Enter Data” section
4. click submit button

Expected behavior

It should prints the keys of all components columns textField submit

Observed behavior

It doesn’t print the keys of the components that belong to a column component columns submit

Solution proposal

file: formio.js/src/utils/formUtils.js

export function eachComponent(components, fn, includeAll, path, parent) {
  if (!components) return;
  path = path || '';
  components.forEach((component) => {
    ...
    
    if (!noRecurse) {
      if (hasColumns) {
        component.columns.forEach((column) =>
            //replacing
            //eachComponent(column.components, fn, includeAll, subPath(), parent ? component : null));
            //with
            eachComponent(column.components || column, fn, includeAll, subPath(), parent ? component : null);
      }

      else if (hasRows) {
        component.rows.forEach((row) => {
          if (Array.isArray(row)) {
            row.forEach((column) =>
              //maybe also replacing (I don't know, I should check)
              //eachComponent(column.components, fn, includeAll, subPath(), parent ? component : null));
              //with
              eachComponent(column.components || column, fn, includeAll, subPath(), parent ? component : null);
          }
        });
      }

      else if (hasComps) {
        eachComponent(component.components, fn, includeAll, subPath(), parent ? component : null);
      }
    }
  });
}

[wag110894]

@agrawalankush,

We have gotten feedback from our developer that was looking into this issue. Here is the information that they provided us with:

utils’ eachComponent method is used for iterating through JSON schemes of components which has a specific format. So, in the Columns’ JSON, each row must always be an object with the ‘components’ field. But in the Columns instance, each column is just an array of components. So, for iterating through components’ instances they should use everyComponent method of the Form’s instance/any component’s instance. E.g.: formInstance.everyComponent((componentInstance) => { // Do what you want with componentInstance return true; // In order to stop iterating just return false });

I hope that this helps.

[SalTor]

wag11084’s comment works as a solution for my problem. For our forms we use mm/dd/yyyy syntax for dates since that’s what our audience is familiar with and then we format the payload of certain fields to use ISO date format when we submit to our backend. Had the same problem as teknoel where Utils.eachComponent(form.components) wasn’t treating components with the same condition the same way; I just hadn’t connected the dots that it was because they were in a Layout component.

Thanks all for your efforts 🚀