Input Validation Message

Import

                                                        
                                                        
                                                            import { InputValidationMessageModule } from '@backbase/ui-ang/input-validation-message'
                                                        
                                                            

Usage

Use the bb-input-validation-message-ui component to show an inline validation message.

                                                        
                                                        
                                                            <!-- Default validation message -->
                                                        <bb-input-validation-message-ui [showErrors]="true">
                                                            <span>Field is required.</span>
                                                        </bb-input-validation-message-ui>
                                                        
                                                            

Inputs

Global configuration token

Use the INPUT_VALIDATION_MESSAGE_CONFIG token to set a global default for showIcon across all instances.

                                                        
                                                        
                                                            import { INPUT_VALIDATION_MESSAGE_CONFIG } from '@backbase/ui-ang/input-validation-message';
                                                        import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
                                                        import { AppModule } from './app/app.module';
                                                        const inputValidationMessageShowIcon = { showIcon: false };
                                                        platformBrowserDynamic().bootstrapModule(AppModule, {
                                                          providers: [{ provide: INPUT_VALIDATION_MESSAGE_CONFIG, useValue: inputValidationMessageShowIcon }]
                                                        });
                                                        
                                                            

messageId

The messageId input sets the id attribute on the message for external references such as aria-errormessage on a related input.

                                                        
                                                        
                                                            <!-- Validation message bound to an input via aria-errormessage -->
                                                        <bb-input-text-ui
                                                            label="Input validation error"
                                                            [attr.aria-invalid]="true"
                                                            aria-errormessage="input-validation-error"
                                                            class="ng-touched ng-invalid"
                                                        ></bb-input-text-ui>
                                                        <bb-input-validation-message-ui
                                                            [showErrors]="true"
                                                            messageId="input-validation-error">
                                                            <span>Sample error message</span>
                                                        </bb-input-validation-message-ui>
                                                        
                                                            

role

The role input sets the ARIA live region role. Use 'status' when multiple validation messages may be present.

                                                        
                                                        
                                                            <!-- Validation message with status role -->
                                                        <bb-input-validation-message-ui [showErrors]="true" role="status">
                                                            <span>Field is required.</span>
                                                        </bb-input-validation-message-ui>
                                                        
                                                            

showErrors

The showErrors input toggles whether the message is rendered.

                                                        
                                                        
                                                            <!-- Validation message shown when errors are present -->
                                                        <bb-input-validation-message-ui [showErrors]="true">
                                                            <span>Field is required.</span>
                                                        </bb-input-validation-message-ui>
                                                        
                                                            

showIcon

The showIcon input toggles the leading icon before the message content. Defaults to true (overrideable via token).

                                                        
                                                        
                                                            <!-- Validation message without the leading icon -->
                                                        <bb-input-validation-message-ui [showErrors]="true" [showIcon]="false">
                                                            <span>Field is required.</span>
                                                        </bb-input-validation-message-ui>
                                                        
                                                            

Accessibility

This component 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.

• Use messageId together with aria-errormessage on the associated input.
• Choose role="status" when multiple validation messages may be present on the screen to avoid aggressive announcements.