Field lookup does not work in nested schemas about formvuelate HOT 8 CLOSED

Hey @datenspast thanks I'm on vacation I'll check it out when I get back 👍

from formvuelate.

Thanks for the repro @datenspast

@logaretm i have a feeling somewhere around ln 58-64 were conflicting in the parsing bc on ParsedSchema ln 104 I need a way to identify the name. I guess maybe we could try changing that condition to check for a .schema also.
Wdyt?

from formvuelate.

Hey @datenspast try changing the component: SchemaForm, // this works for component: SchemaFormWithPlugins, since each level of the nested schema needs to have access to the plugin implementation

https://codesandbox.io/s/fvl-nested-schema-3-x-forked-r16hz?file=/src/App.vue:869-906

Is that what you were expecting?

from formvuelate.

Hi @marina-mosti : Many thanks for your reply and support!
Your proposed solution works but does not solve the issue I´m facing.
Since we get the Schema from an API all values are Strings. So we get e.g.

{
    model: "firstName",
    component: "Text",
    label: "First Name",
  },
  {
    model: "nested",
    component: "SchemaForm", // we get this as a String
    schema: [
      {
        model: "nestedfirstName",
        component: "Text", // we get this as a String
        label: "First Name nested",
      },
    ],
  },

I understand the guide (https://formvuelate.js.org/guide/lookup.html#nested-schema-caveats) that it is also possible to use Strings and map them to the component (SchemaFromWithPlugins in my case):

{
  "firstName": {
    "component": "string",
    "info": "First Name"
  },
  "work": {
    "component": "SchemaForm",
    "schema": {
      "address": {
        "type": "FormText",
        "label": "Work address"
      },
      "details": {
        "component": "SchemaForm",
        "schema": {
          "position": {
            "type": "FormText",
            "label": "Work position"
          }
        }
      }
    }
  }
}

// Note "SchemaFormWithPlugin" getting remapped

const SchemaFormWithPlugin = SchemaFormFactory([
  LookupPlugin({
      SchemaForm: 'SchemaFormWithPlugin', // is the "mapComponents" not included by intention here? I tried it this way but it did not work as well.
      [...]
    }
  })
])

from formvuelate.

@datenspast are you importing components globally? or locally into this file?

Did you check out this caveat: https://formvuelate.js.org/guide/plugins.html#using-locally-imported-components ?

from formvuelate.

So:
SchemaForm: "SchemaFormWithPlugins",

This inside mapComponents can not work, because the component SchemaFormWithPlugins is not globally registered or passed down the schema tree.
Its literally a constant inside your component, so subcomponents have no way of knowing about it.

SchemaFormFactory takes a second param components that registers components in child schema forms or nested schemas. The problem here is that you cant really make the factory a child of itself 😓

I don't see right now any other way of solving this other than you doing a pre-lookup-plugin parsing of the internal schema.component properties into the name of your constant before you feed it your schema.

I'm honestly trying to remember how it worked when I wrote this piece of docs, but ill do more research and try to figure it out and/or delete the documentation which is misleading.

PS: Didnt mean to close, reopening :)

from formvuelate.

@datenspast are you importing components globally? or locally into this file?

I`m importing components locally into this file.

Did you check out this caveat: https://formvuelate.js.org/guide/plugins.html#using-locally-imported-components ?

I tried to make some changes based on this, but did not manage to solve the issue.

I don't see right now any other way of solving this other than you doing a pre-lookup-plugin parsing of the internal
schema.component properties into the name of your constant before you feed it your schema.

Yes, that approach seems to work. I tried this here:
https://codesandbox.io/s/fvl-nested-schema-3-x-forked-c05qr?file=/src/App.vue

@marina-mosti : Many thanks for addressing this issue by adding it as a new feature into the library.

from formvuelate.

Hi @logaretm and @marina-mosti!

I am really sorry to bug you again but the new Feature does not seem to work if the VeeValidatePlugin is also used.
Or do I miss anything?

const SchemaFormWithPlugins = SchemaFormFactory([
  LookupPlugin({
    mapComponents: {
      Text: FormText,
    },
  }),
  // if this is included, the nested schema is not displayed.
  VeeValidatePlugin({        
    }),
]);

const SCHEMA = [
  {
    model: "firstName",
    component: "Text",
    label: "First Name",
  },
  {
    model: "nested",
    component: "SchemaForm",
    schema: [
      {
        model: "nestedfirstName",
        component: "Text", // does not work
        // component: FormText, // Works if VeeValidatePlugin is included
        label: "First Name nested",
      },
    ],
  },
];

Please find an example here:
https://codesandbox.io/s/fvl-nested-schema-3-x-forked-5o1jt?file=/src/App.vue

Many thanks again for your help (I owe you a forest...)

from formvuelate.