You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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]',})exportclassIonScrollToFirstInvalidDirective{
@Input()formGroup: FormGroup|null=null;constructor(privateel: ElementRef){}staticscrollToElement(element: HTMLElement,ionContent: IonContent|null){if(element){constyOffset=element.getBoundingClientRect().top+window.scrollY-150;if(ionContent){// Use Ionic's scrollToPoint if inside ion-contentionContent.scrollToPoint(0,yOffset,500);}else{// Fallback to native scroll if not in ion-contentwindow.scroll({behavior: 'smooth',left: 0,top: yOffset,});}setTimeout(()=>{element.focus();element.blur();// Trigger error messageselement.focus();},500);}}staticmarkFormGroupTouched(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);constformControlInvalid=this.el.nativeElement.querySelector('.ng-invalid');if(formControlInvalid){constionContent=this.getIonContent();returnIonScrollToFirstInvalidDirective.scrollToElement(formControlInvalid,ionContent,);}else{constformGroupInvalid=this.el.nativeElement.querySelectorAll('form .ng-invalid');if(formGroupInvalid&&formGroupInvalid.length){constionContent=this.getIonContent();returnIonScrollToFirstInvalidDirective.scrollToElement(formGroupInvalid[0],ionContent,);}}constionContent=this.getIonContent();returnIonScrollToFirstInvalidDirective.scrollToElement(this.el.nativeElement,ionContent,);}}// Helper method to find parent ion-contentprivategetIonContent(): IonContent|null{letparent=this.el.nativeElement.parentElement;while(parent){if(parent.tagName==='ION-CONTENT'){returnparentasIonContent;}parent=parent.parentElement;}returnnull;// Return null if no ion-content is found}}
To add it to a page, you put it in the [declarations] eg:
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:
To add it to a page, you put it in the
[declarations]
eg:The text was updated successfully, but these errors were encountered: