dynamic-forms / Function

formConfig

Generic types:TFields TProps

Type-safe form config builder that ensures schema matches field structure.

This helper function provides type safety when using form-level schemas by automatically inferring the form value type from fields and constraining the schema type parameter accordingly.

When to use:

  • When you have a form-level schema and want type safety between fields and schema
  • When you prefer function syntax over as const satisfies FormConfig

Note: This is optional. Users who don't need schema type safety can continue using as const satisfies FormConfig directly.

Presentation

function formConfig(
  config: Omit<
    FormConfig<TFields, InferFormValue<TFields>, TProps, unknown>,
    "schema"
  > & { schema?: FormSchema<InferFormValue<TFields>> | undefined },
): FormConfig<TFields, InferFormValue<TFields>, TProps, unknown>;

Returns

FormConfig<TFields, InferFormValue<TFields>, TProps, unknown> -

The same configuration with proper type inference

Parameters

NameTypeDescription
config
Omit<FormConfig<TFields, InferFormValue<TFields>, TProps, unknown>, "schema"> & { schema?: FormSchema<InferFormValue<TFields>> | undefined; }

The form configuration object

Example usage

Basic usage with Zod schema

import { z } from 'zod';
import { formConfig } from '@ng-forge/dynamic-forms';
import { standardSchema } from '@ng-forge/dynamic-forms/schema';

const passwordSchema = z.object({
  password: z.string().min(8),
  confirmPassword: z.string(),
}).refine(
  (data) => data.password === data.confirmPassword,
  { message: 'Passwords must match', path: ['confirmPassword'] }
);

const config = formConfig({
  schema: standardSchema(passwordSchema),
  fields: [
    { key: 'password', type: 'input', label: 'Password', required: true, props: { type: 'password' } },
    { key: 'confirmPassword', type: 'input', label: 'Confirm', required: true, props: { type: 'password' } },
    { key: 'submit', type: 'submit', label: 'Register' },
  ] as const,
});

Equivalent without helper

const config = {
  schema: standardSchema(passwordSchema),
  fields: [...],
} as const satisfies FormConfig;