All files / src/app/core/directives form-submit.directive.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
7x
 
 
 
 
 
 
 
 
7x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Directive, ElementRef, HostListener } from '@angular/core';
 
/**
 * This directive can be used to add functionality on form submit events.
 * It has been used to focus the first invalid form element on submit.
 */
@Directive({
  selector: '[ishFormSubmit]',
})
export class FormSubmitDirective {
  constructor(private elementRef: ElementRef) {}
 
  @HostListener('submit')
  onFormSubmit() {
    const invalidElements = this.elementRef.nativeElement.querySelectorAll('.ng-invalid');
    Iif (invalidElements.length) {
      const firstElement = invalidElements[0] as HTMLElement;
      if (firstElement.tagName.toLowerCase() === 'ng-select') {
        // Special handling for ng-select: focus the nested input
        firstElement.querySelector('input')?.focus();
      } else {
        // For standard form elements, focus the element directly
        firstElement.focus();
      }
    }
  }
}