FormConfig

Signal forms adapter configuration.

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'
}

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.

Provides additional validation beyond field-level validation. Useful for cross-field validation rules.

Example usage

schema: {
  passwordConfirm: validators.equals('password')
}

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' }}];
      }
    }
  }
};