Group Input error has introduced inconsistency in data structure.

[jakkubu]

Both in schema and values Vue-formulate is using JSON-based nested structures. I would expect errors to be handled in the same way instead/besides current dot-notation.

I know that Laravel is using this, but I'm using Django REST and have the same issues as @last-partizan (he described it here). My errors looks like this:

{
  "nested_field": [
    {}, // valid field
    {"field": ["error_message_1", "error_message_2"]},
  ],
}

But I need such format:

nested_field.0.field = ["error_message_1", "error_message_2"]

This won't work:

nested_field.0.field.0 = "error_message_1"
nested_field.0.ifield.1 = "error_message_2"

And dot-object parses data to such format:

group_name[0].input_name[0]

So I have to flatten all arrays except the last one (simple recursion is starting to be not so simple), I cannot re-use some parsers I had to write for schema/values and all people not using Laravel have to do the same, so I won't be the last one..

[justin-schroeder]

The dot notation is the "path" of the input you are trying to apply errors to. The errors are not part of that path since we are setting them declaratively.

I'm not sure what particular behavior you're hoping to achieve though? Is this mostly frustration that the native Vue Formulate syntax is different than Django or are you saying there is some alternative that is less framework specific? Happy to hear suggestions 👍

[jakkubu]

I was hoping to have similar data structure for:

• representing form as a scheme
• representing form data
• representing form errors

Currently first two are represented as nested arrays and the last one is represented as flattened dot-array.

Am I frustrated? A little bit :) I would like to have an easy way of parsing one data representation to the other. Existing dot-notation tools are using different scheme for arrays.

But in the end Vue-formulate is awesome and makes my life easier, which I am grateful for :)

[jakkubu]

For now I'm using this solution (inspired by this stackoverlow answer)

function dotize(src) {
  let res = {};
  // regex for detecting keys, that should hold array value (ending with .<num>)
  const regex = new RegExp("(.\\d+)$");
  (function recurse(obj, parent_key) {
    for (let key in obj) {
      let value = obj[key];
      let new_key = parent_key ? parent_key + "." + key : key; // joined key with dot
      if (value && typeof value === "object") {
        recurse(value, new_key); // it's a nested object, so do it again
      } else {
        // if key ends with .<num> remove this suffix and put all values in an array
        if (regex.test(new_key)) {
          new_key = new_key.replace(regex, "");
          if (!(new_key in res)) {
            // for the first item let's initialize an array
            res[new_key] = [];
          }
          res[new_key].push(value);
        } else {
          res[new_key] = value; // it's not an array, so just set the property
        }
      }
    }
  })(src);
  return res;
}

Note I'm not js programmer - this is my side project, so any suggestion how to improve it are more than welcome :)