How to add a custom validator to Form Builder

What you build

Form Builder ships with built-in validators based on Angular validators such as required, email, minLength, maxLength, min, max, and pattern. A custom validator follows the same rule model: the field schema stores a type, optional value, and optional message. The registered validator definition tells the builder how to render the setting and how to create an Angular ValidatorFn.

Import the validator API

Validator definitions and provider helpers are exported from the Form Builder secondary entry point. The validator itself can use the normal Angular forms types.

Create a validator definition

The example below adds a skuPrefix validator. In the builder inspector it appears as SKU prefix, asks for one text value, and uses defaultMessage when a field rule does not provide its own message.

Match the Angular error key

Set errorKey when the Angular validator returns an error object whose key is different from the Form Builder rule type. The built-in minLength rule, for example, maps to Angular's minlength error key. If your custom validator returns { skuPrefix: ... }, keep errorKey: 'skuPrefix'.

Register it globally

Add the validator to application providers with provideFormBuilderValidator. Once registered, every Form Builder instance can show it in the field Validators tab and every renderer can resolve it when the schema is rendered.

Register multiple validators

Use provideFormBuilderValidators when a feature package exposes a small catalog of project-specific validators. This is useful for product codes, internal IDs, domain-specific ranges, and other rules that should be available to form authors.

Register through provideFormBuilder

If you already configure Form Builder in one place, pass validators through provideFormBuilder alongside custom fields, settings, select data sources, and upload callbacks.

Use the validator in a schema

The saved field only stores the rule. A rule can override the default error message with message. This message is shown below the field when the control is dirty or touched and the Angular validator reports the matching error key.

Render the builder and saved form

The same provider powers both the visual builder and the runtime renderer. Users can configure the validator in the builder, save the schema, and the renderer will apply the same Angular validation behavior.

Custom validator checklist

• Use a stable, unique type because it is saved in the schema.
• Set requiresValue when the rule should not run without a configured value.
• Use valueType, valueLabel, and valuePlaceholder to shape the builder UI.
• Set errorKey when the Angular error key does not match the rule type.
• Use defaultMessage for the reusable fallback and message for per-field copy.