ngx-scroll-to-first-invalid

Angular directive to scroll to first invalid input inside a form.

Report bug · Request feature

Table of contents

• Usage
• Run locally
• Bugs and feature requests
• Creators
• Copyright and license

Usage

npm i @ismaestro/ngx-scroll-to-first-invalid --save-dev

1. Import the directive in your component:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true,
  imports: [NgxScrollToFirstInvalidDirective, ...],
  changeDetection: ChangeDetectionStrategy.OnPush,
})

2. Use the directive inside a form:

<form [formGroup]="testForm" ngxScrollToFirstInvalid>
  <input id="test-input1" type="text" formControlName="someText1" />
  <button (click)="saveForm()"></button>
</form>

It also works with nested forms, and recently added support for Angular Ionic.

Run locally

There is no public demo. The repository contains the library (projects/ngx-scroll-to-first-invalid-lib) and a demo app in src/ that uses it.

Requirements: Node.js and npm.

npm i
npm start          # serves the demo app at http://localhost:4200
npm run build:lib  # builds the library into dist/

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Creators

Ismael Ramos

• https://github.com/ismaestro

Copyright and license

Code released under the MIT License.

Enjoy 🤘