Ionic Version

[rtpHarry]

This is just your directive passed through ChatGPT and asked to support Ionic's scrolling method.

I needed a quick solution so I've just created the directive in the project instead of using the npm package.

I thought it could be a good starting point if you want to add support, or be useful for others looking for a quick solution:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { IonContent } from '@ionic/angular';

@Directive({
  selector: '[ionScrollToFirstInvalid]',
})
export class IonScrollToFirstInvalidDirective {
  @Input() formGroup: FormGroup | null = null;

  constructor(private el: ElementRef) {}

  static scrollToElement(element: HTMLElement, ionContent: IonContent | null) {
    if (element) {
      const yOffset =
        element.getBoundingClientRect().top + window.scrollY - 150;

      if (ionContent) {
        // Use Ionic's scrollToPoint if inside ion-content
        ionContent.scrollToPoint(0, yOffset, 500);
      } else {
        // Fallback to native scroll if not in ion-content
        window.scroll({
          behavior: 'smooth',
          left: 0,
          top: yOffset,
        });
      }

      setTimeout(() => {
        element.focus();
        element.blur(); // Trigger error messages
        element.focus();
      }, 500);
    }
  }

  static markFormGroupTouched(formGroup: FormGroup | null) {
    (<any>Object).values(formGroup?.controls).forEach((control: FormGroup) => {
      control.markAsTouched();

      if (control.controls) {
        IonScrollToFirstInvalidDirective.markFormGroupTouched(control);
      }
    });
  }

  @HostListener('submit', ['$event'])
  onSubmit(event: Event) {
    event.preventDefault();

    if (!this.formGroup?.valid) {
      IonScrollToFirstInvalidDirective.markFormGroupTouched(this.formGroup);

      const formControlInvalid =
        this.el.nativeElement.querySelector('.ng-invalid');

      if (formControlInvalid) {
        const ionContent = this.getIonContent();
        return IonScrollToFirstInvalidDirective.scrollToElement(
          formControlInvalid,
          ionContent,
        );
      } else {
        const formGroupInvalid =
          this.el.nativeElement.querySelectorAll('form .ng-invalid');
        if (formGroupInvalid && formGroupInvalid.length) {
          const ionContent = this.getIonContent();
          return IonScrollToFirstInvalidDirective.scrollToElement(
            formGroupInvalid[0],
            ionContent,
          );
        }
      }

      const ionContent = this.getIonContent();
      return IonScrollToFirstInvalidDirective.scrollToElement(
        this.el.nativeElement,
        ionContent,
      );
    }
  }

  // Helper method to find parent ion-content
  private getIonContent(): IonContent | null {
    let parent = this.el.nativeElement.parentElement;

    while (parent) {
      if (parent.tagName === 'ION-CONTENT') {
        return parent as IonContent;
      }
      parent = parent.parentElement;
    }
    return null; // Return null if no ion-content is found
  }
}

To add it to a page, you put it in the [declarations] eg:

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    IonicModule,
    AboutYouPageRoutingModule,
  ],
  declarations: [AboutYouPage, IonScrollToFirstInvalidDirective],
})
export class AboutYouPageModule {}