show validation messages programmatically

[danbars]

I'm building dynamic forms based on user schema.
I can't use form groups or the multi-step plugin because it created an additional wrapper for the form fields. E.g. I get:

{
  step1: {field1: "", field2:""},
  step2: {field3: "", field4:""},
}

instead of flat object of fields.
This is important for 2 reasons:

1. My server expects flat objects when submitting a form (easy to fix)
2. There are dynamic expressions that users write for showing or hiding fields, and they use just flat field names. With the wrapper I'd have to team my users that instead of using field names in their expressions, they'd have to use step.fieldName, and I don't want to do that.
   Therefore, I'm building my own wrapper for multi step forms, that uses simple divs, and tracks visibility of each step.
   Everything works fine, and I'm able to move between steps.
   I now want to block users from moving to the next step if the fields of this step aren't valid.
   I'm able to track that using:

const hasErrors = currentStepFields.some(field => {
    const isValid = field.context?.state?.valid
    return !isValid
  })

The only problem that I'm facing, is how to actually show the validation messages when the step is invalid.
Basically I want to be able to do the same thing that form group or list do.

I see in the docs that this is not a best practice. But I consider this a legit case.

Any ideas?
Thanks

[danbars]

Alternatively, is it possible to use the multi-step plugin (or the custom implementation example) without having the fields wrapped in objects for each step?

[danbars]

I was able to show the errors doing this on all fields in the step:

field.store.set(
  createMessage({
    key: 'submitted',
    value: true,
    visible: false,
  })
)