How to fix a TypeScript error when building the form fields conditionally?

[MurzNN]

I need to build the list of fields for the BuzzForm schema conditionally, so trying to do it like this:

import { defineSchema, type InferType } from "@buildnbuzz/form-react";

const addSecondField = true;

const schema = defineSchema({
  fields: [
    {
      type: "text",
      name: "myText",
      defaultValue: "foo",
    },
    ...(addSecondField
      ? [
          {
            type: "text",
            name: "myText2",
            defaultValue: "bar",
          },
        ]
      : []),
  ],
});

But it leads to a TypeScript error:

How can we fix it?

[MurzNN]

Probably we can import some type, that is suitable for the defineSchema() argument, and define the variable before the function call. But the interface FormSchema is not exported.

[ladparth]

have you tried using condition property on the field itself?

https://form.buildnbuzz.com/docs/conditional-logic

[MurzNN]

Yes, this works as a workaround, but I want to exclude a field completely from the schema. Actually, I have a more complex logic on how the form is built with many cases like varOne ? fieldOne : fieldTwo and varAnother ?? fieldThree, and this works, except the TS typing 😉

[ladparth]

Oh Okay. let me see what i can do about these type errors.

[ladparth]

I've resolved this by introducing two new type-safe identity helper functions: defineField and defineFields. This would work without any TS errors for your use case.

Usage Example

import { defineField, defineFields, defineSchema } from "@buildnbuzz/form-react";

// Define a single reusable field with strict type safety
const emailField = defineField({
  type: "email",
  name: "email",
  label: "Email Address",
  required: true,
});

// Define a reusable group of fields
const profileFields = defineFields([
  { type: "text", name: "firstName", label: "First Name" },
  { type: "text", name: "lastName", label: "Last Name" },
]);

// Compose them cleanly inside your schema
const schema = defineSchema({
  fields: [emailField, ...profileFields],
});