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
29
10x
 
 
 
 
 
 
 
 
 
 
10x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Directive, ElementRef, HostListener } from '@angular/core';
 
/**
 * This directive can be used to add functionality on form submit events.
 * It focuses the first invalid native form element on submit.
 * Custom elements (hyphenated tag names like Angular components or Formly wrappers) are skipped.
 */
@Directive({
  selector: '[ishFormSubmit]',
  standalone: false,
})
export class FormSubmitDirective {
  constructor(private elementRef: ElementRef<HTMLElement>) {}
 
  @HostListener('submit')
  onFormSubmit() {
    const firstElement = Array.from(this.elementRef.nativeElement.querySelectorAll<HTMLElement>('.ng-invalid')).find(
      el => !el.tagName.includes('-') || el.tagName.toLowerCase() === 'ng-select'
    );
    if (firstElement) {
      if (firstElement.tagName.toLowerCase() === 'ng-select') {
        firstElement.querySelector<HTMLElement>('input')?.focus();
      } else {
        firstElement.focus();
      }
    }
  }
}