Skip to content

Conversation

@ekincia
Copy link
Contributor

@ekincia ekincia commented Aug 13, 2025

Added ngxFormsErrorsCustomErrorMessages input to override global error messages
on a per-control basis, enabling context-specific wording and dynamic translations.

Description:
This PR introduces a new optional input, ngxFormsErrorsCustomErrorMessages, to the ngxFormsErrors directive.
It allows developers to provide custom error message overrides per form control instance while keeping the global defaults defined in NgxFormsErrorsConfigurationToken.

With this change, the directive now:

  • Merges global error messages from the provided configuration with custom error messages from the ngxFormsErrorsCustomErrorMessages input.
  • Prioritizes custom messages when a key exists in both places.
  • Applies overrides both when using a custom error component and when falling back to the built-in <p> tag rendering.

Why this change is needed
Previously, error messages were entirely defined at a global level through NgxFormsErrorsConfigurationToken.errors. This meant:

  • You could not customize a single control’s message without affecting all instances.
  • You could not easily provide context-specific wording for the same error type.

Example scenarios that were impossible before and are now supported:

  1. Different messages for the same error key

    • Global message (invalidURL):

    "De ingegeven tekst is geen geldige URL. Een URL moet altijd beginnen met https:// of http:// (bv. https://www.verenigingsloket.be/)"

    • Custom instance message:

    "De ingegeven tekst is geen geldige URL. Een URL moet altijd beginnen met https:// of http:// (https://www.uitinvlaanderen.be/agenda/e/id of https://www.uitdatabank.be/event/id)"

  2. Dynamic translations or variable interpolation

    • Custom instance message for inputMinValue:

    "{{inputLabel}} mag niet lager zijn dan {{value}}"
    This enables integration with runtime translation systems or templating logic for error messages that require contextual data.


Implementation details

  • Added new input:
	@Input('ngxFormsErrorsCustomErrorMessages')
	public set customErrorMessages(value: Record<string, string>) {
		this._customErrorMessages = value ?? {};
	}
  • During error rendering (handleComponentRender / handleNoComponentFlow), the directive now:

    1. Retrieves errorKeys from getErrors.

    2. Maps each key to either the custom message (if provided) or the default message from config.

  • This logic is applied consistently whether using a provided error component or the built-in paragraph fallback.


Backward compatibility

  • Existing consumers without the new input will see no change in behavior.
  • The directive still honors global defaults exactly as before when no per-instance overrides are provided.

Usage examples:

  • Structural syntax:
<ng-container
  *ngxFormsErrors="myControl; customErrorMessages: {
    invalidURL: 'Custom instance-specific URL message',
    inputMinValue: '{{inputLabel}} mag niet lager zijn dan {{value}}'
  }">
</ng-container>
  • Attribute syntax:
<ng-container
  [ngxFormsErrors]="myControl"
  [ngxFormsErrorsCustomErrorMessages]="{
    invalidURL: 'Custom instance-specific URL message',
    inputMinValue: '{{inputLabel}} mag niet lager zijn dan {{value}}'
  }">
</ng-container>

Requirements

  • Correct label have been assigned
  • Project has been assigned
  • Milestone has been (created/)assigned

…rride global error messages

on a per-control basis, enabling context-specific wording and dynamic translations
@ekincia ekincia self-assigned this Aug 13, 2025
@ekincia ekincia added enhancement New feature or request ngx-forms @studiohyperdrive/ngx-forms labels Aug 13, 2025
Copy link
Contributor

@SergueySHD SergueySHD left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm, @WHeirstrate any opinions?

/**
* Custom error messages to override default ones
*/
private _customErrorMessages: Record<string, string>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not a big fan of the sudden underscore notation. I'd recommend changing the name of either the setter below or this property.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will rename it to customMessages

@WHeirstrate
Copy link
Contributor

Also: don't forget to update the docs! 😃

@ekincia ekincia added this to the ngx-forms:v19.1.0 milestone Aug 14, 2025
Copy link
Contributor

@WHeirstrate WHeirstrate left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Go ahead 🙂

@ekincia ekincia merged commit 7321195 into master Aug 14, 2025
@ekincia ekincia deleted the feat/ngx-forms/errors-directive-custom-error-messages branch August 14, 2025 08:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request ngx-forms @studiohyperdrive/ngx-forms

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants