FormConfig

Signal forms adapter configuration.

Default props applied to all fields in the form.

These props serve as defaults that can be overridden at the field level. Useful for setting consistent styling across the entire form (e.g., appearance, size, or other UI library-specific props).

The cascade order is: Library config → Form defaultProps → Field props Each level can override the previous one.

Example usage

// Material example
const config: MatFormConfig = {
  defaultProps: {
    appearance: 'outline',
    subscriptSizing: 'dynamic',
  },
  fields: [
    { type: 'input', key: 'name', label: 'Name' },  // Uses defaultProps
    { type: 'input', key: 'email', props: { appearance: 'fill' } },  // Override
  ],
};

Form-level validation messages that act as fallback for field-level messages.

These messages are used when a field has validation errors but no field-level validationMessages are defined for that specific error. This allows you to define common validation messages once at the form level instead of repeating them for each field.

Example usage

defaultValidationMessages: {
  required: 'This field is required',
  email: 'Please enter a valid email address',
  minLength: 'Must be at least {{requiredLength}} characters'
}

External data signals available to conditional logic and derivations.

Provides a way to inject external application state into form expressions. Each property is a Signal that will be unwrapped and made available in the EvaluationContext under externalData.

The signals are read reactively in logic functions (when/readonly/disabled) so changes to the external data will trigger re-evaluation of conditions.

Example usage

const config: FormConfig = {
  externalData: {
    userRole: computed(() => this.authService.currentRole()),
    permissions: computed(() => this.authService.permissions()),
    featureFlags: computed(() => this.featureFlagService.flags()),
  },
  fields: [
    {
      type: 'input',
      key: 'adminField',
      label: 'Admin Only Field',
      logic: [{
        effect: 'show',
        condition: {
          type: 'javascript',
          expression: "externalData.userRole === 'admin'"
        }
      }]
    },
    {
      type: 'select',
      key: 'advancedOption',
      label: 'Advanced Option',
      logic: [{
        effect: 'show',
        condition: {
          type: 'javascript',
          expression: "externalData.featureFlags.advancedMode === true"
        }
      }]
    }
  ]
};

Array of field definitions that define the form structure.

Fields are rendered in the order they appear in this array. Supports nested groups and conditional field visibility.

Example usage

fields: [
  { type: 'input', key: 'firstName', label: 'First Name' },
  { type: 'group', key: 'address', label: 'Address', fields: [
    { type: 'input', key: 'street', label: 'Street' }
  ]}
]

Global form configuration options.

Controls form-wide behavior like validation timing and disabled state.

@value {}

Optional form-level validation schema using Standard Schema spec.

Provides additional validation beyond field-level validation. Supports Zod, Valibot, ArkType, and other Standard Schema compliant libraries. Useful for cross-field validation rules.

Example usage

import { z } from 'zod';
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 formConfig = {
  fields: [...],
  schema: standardSchema(PasswordSchema),
} as const satisfies FormConfig;

Global schemas available to all fields.

Reusable validation schemas that can be referenced by field definitions. Promotes consistency and reduces duplication.

Example usage

schemas: [
  { name: 'addressSchema', schema: {
    street: validators.required,
    zipCode: validators.pattern(/^d{5}$/)
  }}
]

Form submission configuration.

When provided, enables integration with Angular Signal Forms' native submit() function. The submission mechanism is optional - you can still handle submission manually via the (submitted) output if you prefer.

While the submission action is executing, form().submitting() will be true, which automatically disables submit buttons (unless configured otherwise).

Server errors returned from the action will be automatically applied to the corresponding form fields.

Example usage

const config: FormConfig = {
  fields: [...],
  submission: {
    action: async (form) => {
      const value = form().value();
      try {
        await this.api.submit(value);
        return undefined;
      } catch (error) {
        return [{ field: form.email, error: { kind: 'server', message: 'Email exists' }}];
      }
    }
  }
};