Control Error Handler

Provides a set of directives and a component to manage and display validation errors for form controls, supporting custom error messages, dynamic error components, and accessible error handling

Import


                                                        
                                                        
                                                            import { ControlErrorHandlerModule } from '@backbase/ui-ang/control-error-handler'

Usage

Use the directives and component from the ControlErrorHandlerModule to display validation errors for form controls. Attach bbFormControl to your form control, and use the other directives as needed for advanced scenarios.


                                                        
                                                        
                                                            <!-- Basic usage with bbFormControl -->
                                                        <input type="text" name="username" ngModel bbFormControl>

Exports

This module provides the following main exports:

ValidationMessageComponent

bb-validation-message-ui

Dynamic component that displays a control validation message based on validation state.

Input	Type	Default
text	string \| undefined	’’

text

The error message to display (set internally by the error handler).

Accessibility

Each message gets a unique ID for ARIA association.

ValidationErrorsDirective

bbFormControl

Directive to attach to form controls for dynamic error handling and ARIA support.

Input	Type	Default
errorComponent	Type<ValidationErrorComponentModel>	Dynamic error template
errorLabels	{ [key: string]: string }	{}
inputSelector	string	'.form-control'
label	string \| null	null
showError	() => boolean	Shows when control is invalid

errorComponent

The errorComponent input allows you to specify a custom error component for the control.


                                                        
                                                        
                                                            <!-- Custom error component -->
                                                        <input type="text" name="username"
                                                            ngModel bbFormControl
                                                            [errorComponent]="MyCustomErrorComponent">

errorLabels

The errorLabels input allows you to provide custom error messages for specific validation errors on a control.


                                                        
                                                        
                                                            <!-- Custom error labels for a control -->
                                                        <input type="text" name="username"
                                                            ngModel bbFormControl
                                                            [errorLabels]="{ required: 'Username is required.' }">

inputSelector

The inputSelector input specifies which element should receive the aria-describedby attribute for accessibility.


                                                        
                                                        
                                                            <!-- Custom input selector -->
                                                        <input type="text" name="username"
                                                            ngModel bbFormControl
                                                            [inputSelector]="'.custom-input'">

label

The label input provides a label for the control, used in error context.


                                                        
                                                        
                                                            <!-- Provide a label for error context -->
                                                        <input type="text" name="username"
                                                            ngModel bbFormControl
                                                            [label]="'Username'">

showError

The showError input lets you provide a custom function to determine when errors should be shown.


                                                        
                                                        
                                                            <!-- Custom error display logic -->
                                                        <input type="text" name="username"
                                                            ngModel bbFormControl
                                                            [showError]="myShowErrorFn">

Accessibility

Dynamically manages aria-describedby on the input for screen readers.

FormSubmitDirective

bbFormSubmit

Directive for forms to provide a submit event observable for error handling. Use form[bbFormSubmit] as selector.

Output	Event	Description
submit	Observable<Event>	Emits on form submit

ControlErrorContainerDirective

bbControlErrorContainer

Directive to mark a container for error messages, allowing custom placement. Use [bbControlErrorContainer] as selector. It exposes a ViewContainerRef for dynamic error component insertion.


                                                        
                                                        
                                                            <!-- Custom error labels for a control -->
                                                        <input type="text" name="username"
                                                            ngModel bbFormControl
                                                            [errorLabels]="{ required: 'Username is required.' }">
                                                        <div bbControlErrorContainer></div>

Accessibility

This module is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.

Dynamically manages aria-describedby on form controls to associate error messages for screen readers.

Each error message gets a unique ID for ARIA association.

Custom error components and containers should be designed with accessibility in mind.