Custom Field Types in Form Builder Plugin

default discord avatar
haniel.u
6 months ago
5

I believe I'm following the docs properly, and I'm getting this error.



Here's the field schema:


const fields: Field[] = [
  {
    type: "row",
    fields: [
      {
        name: "name",
        label: "Name (lowercase, no special characters)",
        required: true,
        type: "text",
      },
      {
        name: "label",
        type: "text",
      },
    ],
  },
  {
    type: "row",
    fields: [
      {
        name: "width",
        type: "number",
      },
      {
        name: "defaultValue",
        type: "text",
      },
    ],
  },
  {
    name: "options",
    type: "array",
    fields: [
      {
        type: "row",
        fields: [
          {
            name: "label",
            type: "text",
          },
          {
            name: "value",
            type: "text",
          },
        ],
      },
    ],
  },
];


Here's how I'm using it with the plugin



Fixed, Basically the type for multiselect should be a Block, meaning I was missing the slug proerty

  • discord user avatar
    jacobsfletch
    Payload Team
    5 months ago

    @haniel.u Ahh yea good catch. That is a

    Partial

    type so all required fields become optional. We need to explicitly maintain the requirement of this property—I just opened up a ticket in the plugin repo to improve this

    https://github.com/payloadcms/plugin-form-builder/issues/34

    .



    Custom Field Types in Form Builder Plugin

  • default discord avatar
    pgrts
    2 months ago

    hey @haniel.u @jacobsfletch could you provide some extra info on how to fix this issue? I'm getting the exact same error as provided

    ERROR (payload): 1: Collection "forms" > Field "fields" > "value" does not match any of the allowed types



    i tried the following:


      plugins: [
            FormBuilder({
                fields: {
                    multiSelect: {
                        labels: {
                            singular: "multi select",
                            plural: "multi select fields",
                        },
                        fields: [
                            {
                                name: "title",
                                label: "Page Title",
                                type: "text",
                                required: false,
                            },
                        ],
                    },
                    payment: false,
                    text: true,
    
                    etc...

    What am i missing here?

  • discord user avatar
    jacobsfletch
    Payload Team
    2 months ago

    It looks like your custom “multi-select” field config is not properly formatted, you need a “name” and “type” etc

  • default discord avatar
    pgrts
    2 months ago

    @jacobsfletch thanks for responding. I managed to fix it. It's not clear what i was missing as the Partial type is not comprehensive. But i see your issue is still open:

    https://github.com/payloadcms/plugin-form-builder/issues/34

    for future readers, this is how i fixed it:



    const FormConfig = {
        fields: {
            text: {
                ...fields.text,
                fields: [
                    ...fields.text.fields,
                    {
                        type: "row",
                        fields: [
                            {
                                name: "regExp",
                                label: "Regex pattern (e.g. \\d+ )",
                                type: "text",
                                required: false,
                                admin: { width: "50%" },
                            },
                        ],
                    },
                ],
            },
            payment: false,
            message: false,
        },
    };

    `

  • discord user avatar
    jacobsfletch
    Payload Team
    2 months ago

    @pgrts NICE! I'm glad that was it. Yea we really should improve these types so others don't spin their wheels too 👍

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.