Custom Field Types in Form Builder Plugin

haniel.u

6 months ago

5

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",
          },
        ],
      },
    ],
  },
];

• 

  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

• 

  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?

• 

  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

• 

  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,
      },
  };

  `

• 

  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 👍