Focus Invalid Input

Import

                                                        
                                                        
                                                            import { FocusInvalidInputModule } from '@backbase/ui-ang/focus-invalid-input'
                                                        
                                                            

Usage

Apply the bbFocusInvalidInput directive to a form element to automatically focus the first invalid input when the form is submitted.

                                                        
                                                        
                                                            <!-- Basic focus invalid input usage -->
                                                        <form bbFocusInvalidInput>
                                                            <input name="firstName" required [(ngModel)]="firstName" />
                                                            <input name="lastName" required [(ngModel)]="lastName" />
                                                            <button type="submit">Submit</button>
                                                        </form>
                                                        
                                                            

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.

• When the form is submitted, the directive automatically scrolls to and focuses the first invalid input, helping users quickly identify and correct errors.
• Special handling is included for rich text editors (such as Quill), ensuring focus is managed correctly for custom input components.
• The directive works with standard form controls input, textarea, select, button) and custom editors.