Awesome Open Source
Awesome Open Source


Angular directive to scroll to first invalid input inside a form on submit

Demo example
Report bug · Request feature

Table of contents



Quick start

First you need to install the npm module:

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

1. Import the NgxScrollToFirstInvalidModule:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgxScrollToFirstInvalidModule} from '@ismaestro/ngx-scroll-to-first-invalid';

    imports: [
    bootstrap: [AppComponent]
export class AppModule { }

2. Use the directive inside a form:

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

Here there is an example using ngx-scroll-to-first-invalid here

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.


Ismael Ramos

Buy Me a Coffee at

Copyright and license

Code and documentation copyright 2011-2018 the authors. Code released under the MIT License.

Enjoy 🤘

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (253,180
Angular (12,654
Form (2,184
Control (943
Scroll (569
Directive (288
First (167
Related Projects